React Bootstrap 5 To Do List 

  import React from "react"; import { MDBBtn, MDBCard, MDBCardBody, MDBCheckbox, MDBCol, MDBContainer, MDBIcon, MDBListGroup, MDBListGroupItem, MDBRow, MDBSelect, MDBTooltip, } from "mdb-react-ui-kit"; export default function App() { return ( <MDBContainer className="py-5"> <MDBRow className="d-flex justify-content-center align-items-center h-100"> <MDBCol> <MDBCard id="list1" style={{ borderRadius: ".75rem", backgroundColor: "#eff1f2" }} > <MDBCardBody className="py-4 px-4 px-md-5"> <p className="h1 text-center mt-3 mb-4 pb-3 text-primary"> <MDBIcon fas icon="check-square" className="me-1" /> <u>My Todo-s</u> </p> <div className="pb-2"> <MDBCard> <MDBCardBody> <div className="d-flex flex-row align-items-center"> <input type="text" className="form-control form-control-lg" id="exampleFormControlInput1" placeholder="Add new..." /> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Set due date" > <MDBIcon fas icon="calendar-alt" size="lg" className="me-3" /> </MDBTooltip> <div> <MDBBtn>Add</MDBBtn> </div> </div> </MDBCardBody> </MDBCard> </div> <hr className="my-4" /> <div className="d-flex justify-content-end align-items-center mb-4 pt-2 pb-3"> <p className="small mb-0 me-2 text-muted">Filter</p> <MDBSelect data={[ { text: "All", value: 1 }, { text: "Completed", value: 2 }, { text: "Active", value: 3 }, { text: "Has due date", value: 4 }, ]} /> <p className="small mb-0 ms-4 me-2 text-muted">Sort</p> <MDBSelect data={[ { text: "Added date", value: 1 }, { text: "Due date", value: 2 }, ]} /> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Ascending" > <MDBIcon fas icon="sort-amount-down-alt" className="ms-2" style={{ color: "#23af89" }} /> </MDBTooltip> </div> <MDBListGroup horizontal className="rounded-0 bg-transparent"> <MDBListGroupItem className="d-flex align-items-center ps-0 pe-3 py-1 rounded-0 border-0 bg-transparent"> <MDBCheckbox name="flexCheck" value="" id="flexCheckChecked" defaultChecked /> </MDBListGroupItem> <MDBListGroupItem className="px-3 py-1 d-flex align-items-center flex-grow-1 border-0 bg-transparent"> {" "} <p className="lead fw-normal mb-0"> Buy groceries for next week </p> </MDBListGroupItem> <MDBListGroupItem className="ps-3 pe-0 py-1 rounded-0 border-0 bg-transparent"> <div className="d-flex flex-row justify-content-end mb-1"> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Edit todo" > <MDBIcon fas icon="pencil-alt" className="me-3" color="info" /> </MDBTooltip> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Delete todo" > <MDBIcon fas icon="trash-alt" color="danger" /> </MDBTooltip> </div> <div className="text-end text-muted"> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Created date" > <p className="small text-muted mb-0"> <MDBIcon fas icon="info-circle" className="me-2" /> 28th Jun 2020 </p> </MDBTooltip> </div> </MDBListGroupItem> </MDBListGroup> <MDBListGroup horizontal className="rounded-0 bg-transparent"> <MDBListGroupItem className="d-flex align-items-center ps-0 pe-3 py-1 rounded-0 border-0 bg-transparent"> <MDBCheckbox name="flexCheck" value="" id="flexCheck" /> </MDBListGroupItem> <MDBListGroupItem className="px-3 py-1 d-flex align-items-center flex-grow-1 border-0 bg-transparent"> {" "} <p className="lead fw-normal mb-0">Renew car insurance</p> </MDBListGroupItem> <MDBListGroupItem className="px-3 py-1 d-flex align-items-center border-0 bg-transparent"> <div className="py-2 px-3 me-2 border border-warning rounded-3 d-flex align-items-center bg-light"> <p className="small mb-0"> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Due on date" > <MDBIcon fas icon="hourglass-half" color="warning" className="me-2" /> </MDBTooltip> 28th Jun 2020 </p> </div> </MDBListGroupItem> <MDBListGroupItem className="ps-3 pe-0 py-1 rounded-0 border-0 bg-transparent"> <div className="d-flex flex-row justify-content-end mb-1"> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Edit todo" > <MDBIcon fas icon="pencil-alt" className="me-3" color="info" /> </MDBTooltip> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Delete todo" > <MDBIcon fas icon="trash-alt" color="danger" /> </MDBTooltip> </div> <div className="text-end text-muted"> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Created date" > <p className="small text-muted mb-0"> <MDBIcon fas icon="info-circle" className="me-2" /> 28th Jun 2020 </p> </MDBTooltip> </div> </MDBListGroupItem> </MDBListGroup> <MDBListGroup horizontal className="rounded-0 bg-transparent"> <MDBListGroupItem className="d-flex align-items-center ps-0 pe-3 py-1 rounded-0 border-0 bg-transparent"> <MDBCheckbox name="flexCheck" value="" id="flexCheck" /> </MDBListGroupItem> <MDBListGroupItem className="px-3 py-1 d-flex align-items-center flex-grow-1 border-0 bg-transparent"> {" "} <p className="lead fw-normal mb-0 bg-light w-100 ms-n2 ps-2 py-1 rounded"> Sign up for online course </p> </MDBListGroupItem> <MDBListGroupItem className="ps-3 pe-0 py-1 rounded-0 border-0 bg-transparent"> <div className="d-flex flex-row justify-content-end mb-1"> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Delete todo" > <MDBIcon fas icon="trash-alt" color="danger" /> </MDBTooltip> </div> <div className="text-end text-muted"> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Created date" > <p className="small text-muted mb-0"> <MDBIcon fas icon="info-circle" className="me-2" /> 28th Jun 2020 </p> </MDBTooltip> </div> </MDBListGroupItem> </MDBListGroup> </MDBCardBody> </MDBCard> </MDBCol> </MDBRow> </MDBContainer> ); }  

  import React from "react"; import { MDBBadge, MDBCard, MDBCardBody, MDBCheckbox, MDBCol, MDBContainer, MDBListGroup, MDBListGroupItem, MDBRow, } from "mdb-react-ui-kit"; export default function App() { return ( <section className="p-5 vh-100" style={{ backgroundColor: "#3da2c3" }}> <MDBContainer className="py-5 h-100"> <MDBRow className="d-flex justify-content-center align-items-center"> <MDBCol lg="8" xl="6"> <MDBCard className="rounded-3"> <MDBCardBody className="p-4"> <h5> <span className="h2 me-2">Team Meeting</span>{" "} <MDBBadge className="mx-2" color="danger"> checklist </MDBBadge> </h5> <p className="text-muted pb-2">04/01/2020 • ML - 1321</p> <MDBListGroup className="rounded-0"> <MDBListGroupItem className="border-0 d-flex align-items-center ps-0"> <MDBCheckbox name="flexCheck" value="" id="flexCheckChecked" className="me-3" defaultChecked /> <s>Task list and assignments</s> </MDBListGroupItem> <MDBListGroupItem className="border-0 d-flex align-items-center ps-0"> <MDBCheckbox name="flexCheck" value="" id="flexCheck" className="me-3" /> Set due date and assignments </MDBListGroupItem> <MDBListGroupItem className="border-0 d-flex align-items-center ps-0"> <MDBCheckbox name="flexCheck" value="" id="flexCheck" className="me-3" /> Remove duplicate tasks and stories </MDBListGroupItem> <MDBListGroupItem className="border-0 d-flex align-items-center ps-0"> <MDBCheckbox name="flexCheck" value="" id="flexCheck" className="me-3" /> Update the userflow and stories </MDBListGroupItem> <MDBListGroupItem className="border-0 d-flex align-items-center ps-0"> <MDBCheckbox name="flexCheck" value="" id="flexCheck" className="me-3" /> Adjust the components </MDBListGroupItem> </MDBListGroup> <div className="divider d-flex align-items-center my-4"> <p className="text-center mx-3 mb-0" style={{ color: "#a2aab7" }} > Shared with </p> </div> <MDBListGroup horizontal className="rounded-0 justify-content-center pb-2" > <MDBListGroupItem className="border-0 d-flex align-items-center p-0"> <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-8.webp" alt="avatar" className="rounded-circle me-n2" width="45" /> </MDBListGroupItem> <MDBListGroupItem className="border-0 d-flex align-items-center p-0"> <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-3.webp" alt="avatar" className="rounded-circle me-n2" width="45" /> </MDBListGroupItem> <MDBListGroupItem className="border-0 d-flex align-items-center p-0"> <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp" alt="avatar" className="rounded-circle me-n2" width="45" /> </MDBListGroupItem> <MDBListGroupItem className="border-0 d-flex align-items-center p-0"> <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp" alt="avatar" className="rounded-circle me-n2" width="45" /> </MDBListGroupItem> </MDBListGroup> </MDBCardBody> </MDBCard> </MDBCol> </MDBRow> </MDBContainer> </section> ); }  

  import React from "react"; import { MDBBtn, MDBCard, MDBCardBody, MDBCol, MDBContainer, MDBInput, MDBRow, MDBTable, MDBTableBody, MDBTableHead, } from "mdb-react-ui-kit"; export default function App() { return ( <section className="vh-100" style={{ backgroundColor: "#eee" }}> <MDBContainer className="py-5 h-100"> <MDBRow className="d-flex justify-content-center align-items-center"> <MDBCol lg="9" xl="7"> <MDBCard className="rounded-3"> <MDBCardBody className="p-4"> <h4 className="text-center my-3 pb-3">To Do App</h4> <MDBRow className="row-cols-lg-auto g-3 justify-content-center align-items-center mb-4 pb-2"> <MDBCol size="12"> <MDBInput label="Enter a task here" id="form1" type="text" /> </MDBCol> <MDBCol size="12"> <MDBBtn type="submit">Save</MDBBtn> </MDBCol> <MDBCol size="12"> <MDBBtn type="submit" color="warning"> Get tasks </MDBBtn> </MDBCol> </MDBRow> <MDBTable className="mb-4"> <MDBTableHead> <tr> <th scope="col">No.</th> <th scope="col">Todo item</th> <th scope="col">Status</th> <th scope="col">Actions</th> </tr> </MDBTableHead> <MDBTableBody> <tr> <th scope="row">1</th> <td>Buy groceries for next week</td> <td>In progress</td> <td> <MDBBtn type="submit" color="danger"> Delete </MDBBtn> <MDBBtn type="submit" color="success" className="ms-1"> Finished </MDBBtn> </td> </tr> <tr> <th scope="row">2</th> <td>Renew car insurance</td> <td>In progress</td> <td> <MDBBtn type="submit" color="danger"> Delete </MDBBtn> <MDBBtn type="submit" color="success" className="ms-1"> Finished </MDBBtn> </td> </tr> <tr> <th scope="row">3</th> <td>Sign up for online course</td> <td>In progress</td> <td> <MDBBtn type="submit" color="danger"> Delete </MDBBtn> <MDBBtn type="submit" color="success" className="ms-1"> Finished </MDBBtn> </td> </tr> </MDBTableBody> </MDBTable> </MDBCardBody> </MDBCard> </MDBCol> </MDBRow> </MDBContainer> </section> ); }  

  import React, { useState } from "react"; import { MDBBtn, MDBCard, MDBCardBody, MDBCheckbox, MDBCol, MDBContainer, MDBInput, MDBListGroup, MDBListGroupItem, MDBRow, MDBTabs, MDBTabsContent, MDBTabsItem, MDBTabsLink, MDBTabsPane, } from "mdb-react-ui-kit"; export default function App() { const [active, setActive] = useState("tab1"); const handleClick = (value) => { if (value === active) { return; } setActive(value); }; return ( <section className="gradient-custom vh-100"> <MDBContainer className="py-5 h-100"> <MDBRow className="d-flex justify-content-center align-items-center"> <MDBCol xl="10"> <MDBCard> <MDBCardBody className="p-5"> <div className="d-flex justify-content-center align-items-center mb-4"> <MDBInput type="text" id="form1" label="New task..." wrapperClass="flex-fill" /> <MDBBtn type="submit" color="info" className="ms-2"> Add </MDBBtn> </div> <MDBTabs className="mb-4 pb-2"> <MDBTabsItem> <MDBTabsLink onClick={() => handleClick("tab1")} active={active === "tab1"} > All </MDBTabsLink> </MDBTabsItem> <MDBTabsItem> <MDBTabsLink onClick={() => handleClick("tab2")} active={active === "tab2"} > Active </MDBTabsLink> </MDBTabsItem> <MDBTabsItem> <MDBTabsLink onClick={() => handleClick("tab3")} active={active === "tab3"} > Completed </MDBTabsLink> </MDBTabsItem> </MDBTabs> <MDBTabsContent> <MDBTabsPane show={active === "tab1"}> <MDBListGroup className="mb-0"> <MDBListGroupItem className=" d-flex align-items-center border-0 mb-2 rounded" style={{ backgroundColor: "#f4f6f7" }} > {" "} <MDBCheckbox name="flexCheck" value="" id="flexCheck" className="me-3" defaultChecked /> <s>Cras justo odio</s> </MDBListGroupItem> <MDBListGroupItem className=" d-flex align-items-center border-0 mb-2 rounded" style={{ backgroundColor: "#f4f6f7" }} > {" "} <MDBCheckbox name="flexCheck" value="" id="flexCheck" className="me-3" defaultChecked /> <s>Dapibus ac facilisis in</s> </MDBListGroupItem> <MDBListGroupItem className=" d-flex align-items-center border-0 mb-2 rounded" style={{ backgroundColor: "#f4f6f7" }} > {" "} <MDBCheckbox name="flexCheck" value="" id="flexCheck" className="me-3" /> Morbi leo risus </MDBListGroupItem> <MDBListGroupItem className=" d-flex align-items-center border-0 mb-2 rounded" style={{ backgroundColor: "#f4f6f7" }} > {" "} <MDBCheckbox name="flexCheck" value="" id="flexCheck" className="me-3" /> Porta ac consectetur ac </MDBListGroupItem> <MDBListGroupItem className=" d-flex align-items-center border-0 mb-2 rounded" style={{ backgroundColor: "#f4f6f7" }} > {" "} <MDBCheckbox name="flexCheck" value="" id="flexCheck" className="me-3" /> Vestibulum at eros </MDBListGroupItem> </MDBListGroup> </MDBTabsPane> <MDBTabsPane show={active === "tab2"}> <MDBListGroup className="mb-0"> <MDBListGroupItem className=" d-flex align-items-center border-0 mb-2 rounded" style={{ backgroundColor: "#f4f6f7" }} > {" "} <MDBCheckbox name="flexCheck" value="" id="flexCheck" className="me-3" /> Morbi leo risus </MDBListGroupItem> <MDBListGroupItem className=" d-flex align-items-center border-0 mb-2 rounded" style={{ backgroundColor: "#f4f6f7" }} > {" "} <MDBCheckbox name="flexCheck" value="" id="flexCheck" className="me-3" /> Porta ac consectetur ac </MDBListGroupItem> <MDBListGroupItem className=" d-flex align-items-center border-0 mb-2 rounded" style={{ backgroundColor: "#f4f6f7" }} > {" "} <MDBCheckbox name="flexCheck" value="" id="flexCheck" className="me-3" /> Vestibulum at eros </MDBListGroupItem> </MDBListGroup> </MDBTabsPane> <MDBTabsPane show={active === "tab3"}> <MDBListGroup className="mb-0"> <MDBListGroupItem className=" d-flex align-items-center border-0 mb-2 rounded" style={{ backgroundColor: "#f4f6f7" }} > {" "} <MDBCheckbox name="flexCheck" value="" id="flexCheck" className="me-3" defaultChecked /> <s>Cras justo odio</s> </MDBListGroupItem> <MDBListGroupItem className=" d-flex align-items-center border-0 mb-2 rounded" style={{ backgroundColor: "#f4f6f7" }} > {" "} <MDBCheckbox name="flexCheck" value="" id="flexCheck" className="me-3" defaultChecked /> <s>Dapibus ac facilisis in</s> </MDBListGroupItem> </MDBListGroup> </MDBTabsPane> </MDBTabsContent> </MDBCardBody> </MDBCard> </MDBCol> </MDBRow> </MDBContainer> </section> ); }  

  import React from "react"; import { MDBBtn, MDBCard, MDBCardBody, MDBCheckbox, MDBCol, MDBContainer, MDBIcon, MDBListGroup, MDBListGroupItem, MDBRow, MDBTextArea, MDBTooltip, } from "mdb-react-ui-kit"; export default function App() { return ( <section className="vh-100" style={{ backgroundColor: "#e2d5de" }}> <MDBContainer className="py-5 h-100"> <MDBRow className="d-flex justify-content-center align-items-center"> <MDBCol xl="10"> <MDBCard style={{ borderRadius: "15px" }}> <MDBCardBody className="p-5"> <h6 className="mb-3">Awesome Todo List</h6> <div className="d-flex justify-content-center align-items-center mb-4"> <MDBTextArea label="What do you need to do today?" id="textAreaExample" rows={4} wrapperClass="flex-fill" /> <MDBBtn type="submit" size="lg" className="ms-2"> Add </MDBBtn> </div> <MDBListGroup className="mb-0"> <MDBListGroupItem className="d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2"> <div className="d-flex align-items-center"> <MDBCheckbox name="flexCheck" value="" id="flexCheckChecked" className="me-3" /> Task list and assignments </div> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Remove item" > <MDBIcon fas icon="times" color="primary" /> </MDBTooltip> </MDBListGroupItem> <MDBListGroupItem className="d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2"> <div className="d-flex align-items-center"> <MDBCheckbox name="flexCheck" value="" id="flexCheckChecked" className="me-3" defaultChecked /> <s>Dapibus ac facilisis in</s> </div> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Remove item" > <MDBIcon fas icon="times" color="primary" /> </MDBTooltip> </MDBListGroupItem> <MDBListGroupItem className="d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2"> <div className="d-flex align-items-center"> <MDBCheckbox name="flexCheck" value="" id="flexCheck" className="me-3" /> Morbi leo risus </div> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Remove item" > <MDBIcon fas icon="times" color="primary" /> </MDBTooltip> </MDBListGroupItem> <MDBListGroupItem className="d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2"> <div className="d-flex align-items-center"> <MDBCheckbox name="flexCheck" value="" id="flexCheck" className="me-3" /> Porta ac consectetur ac </div> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Remove item" > <MDBIcon fas icon="times" color="primary" /> </MDBTooltip> </MDBListGroupItem> <MDBListGroupItem className="d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2"> <div className="d-flex align-items-center"> <MDBCheckbox name="flexCheck" value="" id="flexCheckChecked" className="me-3" defaultChecked /> Vestibulum at eros </div> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Remove item" > <MDBIcon fas icon="times" color="primary" /> </MDBTooltip> </MDBListGroupItem> <MDBListGroupItem className="d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2"> <div className="d-flex align-items-center"> <MDBCheckbox name="flexCheck" value="" id="flexCheck" className="me-3" /> Morbi leo risus </div> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Remove item" > <MDBIcon fas icon="times" color="primary" /> </MDBTooltip> </MDBListGroupItem> </MDBListGroup> </MDBCardBody> </MDBCard> </MDBCol> </MDBRow> </MDBContainer> </section> ); }  

  import React from "react"; import { MDBBadge, MDBCard, MDBCardBody, MDBCol, MDBContainer, MDBIcon, MDBRow, MDBTable, MDBTableBody, MDBTableHead, MDBTooltip, } from "mdb-react-ui-kit"; export default function App() { return ( <section className="gradient-custom-2 vh-100"> <MDBContainer className="py-5 h-100"> <MDBRow className="d-flex justify-content-center align-items-center"> <MDBCol md="12" xl="10"> <MDBCard className="mask-custom"> <MDBCardBody className="p-4 text-white"> <div className="text-center pt-3 pb-2"> <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-todo-list/check1.webp" alt="Check" width="60" /> <h2 className="my-4">Task List</h2> </div> <MDBTable className="text-white mb-0"> <MDBTableHead> <tr> <th scope="col">Team Member</th> <th scope="col">Task</th> <th scope="col">Priority</th> <th scope="col">Actions</th> </tr> </MDBTableHead> <MDBTableBody> <tr className="fw-normal"> <th> <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp" alt="avatar 1" style={{ width: "45px", height: "auto" }} /> <span className="ms-2">Alice Mayer</span> </th> <td className="align-middle"> <span>Call Sam For payments</span> </td> <td className="align-middle"> <h6 className="mb-0"> <MDBBadge className="mx-2" color="danger"> High priority </MDBBadge> </h6> </td> <td className="align-middle"> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Done" > <MDBIcon fas icon="check" color="success" size="lg" className="me-3" /> </MDBTooltip> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Remove" > <MDBIcon fas icon="trash-alt" color="warning" size="lg" className="me-3" /> </MDBTooltip> </td> </tr> <tr className="fw-normal"> <th> <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp" alt="avatar 2" style={{ width: "45px", height: "auto" }} /> <span className="ms-2">Kate Moss</span> </th> <td className="align-middle"> <span>Make payment to Bluedart</span> </td> <td className="align-middle"> <h6 className="mb-0"> <MDBBadge className="mx-2" color="success"> Low priority </MDBBadge> </h6> </td> <td className="align-middle"> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Done" > <MDBIcon fas icon="check" color="success" size="lg" className="me-3" /> </MDBTooltip> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Remove" > <MDBIcon fas icon="trash-alt" color="warning" size="lg" className="me-3" /> </MDBTooltip> </td> </tr> <tr className="fw-normal"> <th> <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp" alt="avatar 3" style={{ width: "45px", height: "auto" }} /> <span className="ms-2">Danny McChain</span> </th> <td className="align-middle"> <span>Office rent</span> </td> <td className="align-middle"> <h6 className="mb-0"> <MDBBadge className="mx-2" color="warning"> Middle priority </MDBBadge> </h6> </td> <td className="align-middle"> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Done" > <MDBIcon fas icon="check" color="success" size="lg" className="me-3" /> </MDBTooltip> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Remove" > <MDBIcon fas icon="trash-alt" color="warning" size="lg" className="me-3" /> </MDBTooltip> </td> </tr> <tr className="fw-normal"> <th> <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp" alt="avatar 4" style={{ width: "45px", height: "auto" }} /> <span className="ms-2">Alexa Chung</span> </th> <td className="align-middle"> <span>Office grocery shopping</span> </td> <td className="align-middle"> <h6 className="mb-0"> <MDBBadge className="mx-2" color="danger"> High priority </MDBBadge> </h6> </td> <td className="align-middle"> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Done" > <MDBIcon fas icon="check" color="success" size="lg" className="me-3" /> </MDBTooltip> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Remove" > <MDBIcon fas icon="trash-alt" color="warning" size="lg" className="me-3" /> </MDBTooltip> </td> </tr> <tr className="fw-normal"> <th className="border-0"> <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava6-bg.webp" alt="avatar 5" style={{ width: "45px", height: "auto" }} /> <span className="ms-2">Ben Smith</span> </th> <td className="border-0 align-middle"> <span>Ask for Lunch to Clients</span> </td> <td className="border-0 align-middle"> <h6 className="mb-0"> <MDBBadge className="mx-2" color="success"> Low priority </MDBBadge> </h6> </td> <td className="border-0 align-middle"> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Done" > <MDBIcon fas icon="check" color="success" size="lg" className="me-3" /> </MDBTooltip> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Remove" > <MDBIcon fas icon="trash-alt" color="warning" size="lg" className="me-3" /> </MDBTooltip> </td> </tr> </MDBTableBody> </MDBTable> </MDBCardBody> </MDBCard> </MDBCol> </MDBRow> </MDBContainer> </section> ); }  

  import React from "react"; import { MDBBadge, MDBCard, MDBCardBody, MDBCardHeader, MDBCol, MDBContainer, MDBIcon, MDBRow, MDBScrollbar, MDBTable, MDBTableBody, MDBTableHead, MDBTooltip, } from "mdb-react-ui-kit"; export default function App() { return ( <section className="gradient-custom-2 vh-100"> <MDBContainer className="py-5 h-100"> <MDBRow className="d-flex justify-content-center align-items-center"> <MDBCol md="12" xl="10"> <MDBCard> <MDBCardHeader className="p-3"> <h5 className="mb-0"> <MDBIcon fas icon="tasks" className="me-2" /> Task List </h5> </MDBCardHeader> <MDBScrollbar style={{ position: "relative", height: "400px" }}> <MDBCardBody> <MDBTable className="mb-0"> <MDBTableHead> <tr> <th scope="col">Team Member</th> <th scope="col">Task</th> <th scope="col">Priority</th> <th scope="col">Actions</th> </tr> </MDBTableHead> <MDBTableBody> <tr className="fw-normal"> <th> <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp" alt="avatar" className="shadow-1-strong rounded-circle" style={{ width: "45px", height: "auto" }} /> <span className="ms-2">Alice Mayer</span> </th> <td className="align-middle"> <span>Call Sam For payments</span> </td> <td className="align-middle"> <h6 className="mb-0"> <MDBBadge className="mx-2" color="danger"> High priority </MDBBadge> </h6> </td> <td className="align-middle"> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Done" > <MDBIcon fas icon="check" color="success" size="lg" className="me-3" /> </MDBTooltip> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Remove" > <MDBIcon fas icon="trash-alt" color="danger" size="lg" className="me-3" /> </MDBTooltip> </td> </tr> <tr className="fw-normal"> <th> <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-4.webp" alt="avatar" className="shadow-1-strong rounded-circle" style={{ width: "45px", height: "auto" }} /> <span className="ms-2">Kate Moss</span> </th> <td className="align-middle"> <span>Make payment to Bluedart</span> </td> <td className="align-middle"> <h6 className="mb-0"> <MDBBadge className="mx-2" color="success"> Low priority </MDBBadge> </h6> </td> <td className="align-middle"> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Done" > <MDBIcon fas icon="check" color="success" size="lg" className="me-3" /> </MDBTooltip> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Remove" > <MDBIcon fas icon="trash-alt" color="danger" size="lg" className="me-3" /> </MDBTooltip> </td> </tr> <tr className="fw-normal"> <th> <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp" alt="avatar" className="shadow-1-strong rounded-circle" style={{ width: "45px", height: "auto" }} /> <span className="ms-2">Danny McChain</span> </th> <td className="align-middle"> <span>Office rent</span> </td> <td className="align-middle"> <h6 className="mb-0"> <MDBBadge className="mx-2" color="warning"> Middle priority </MDBBadge> </h6> </td> <td className="align-middle"> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Done" > <MDBIcon fas icon="check" color="success" size="lg" className="me-3" /> </MDBTooltip> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Remove" > <MDBIcon fas icon="trash-alt" color="danger" size="lg" className="me-3" /> </MDBTooltip> </td> </tr> <tr className="fw-normal"> <th> <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-3.webp" alt="avatar" className="shadow-1-strong rounded-circle" style={{ width: "45px", height: "auto" }} /> <span className="ms-2">Alexa Chung</span> </th> <td className="align-middle"> <span>Office grocery shopping</span> </td> <td className="align-middle"> <h6 className="mb-0"> <MDBBadge className="mx-2" color="danger"> High priority </MDBBadge> </h6> </td> <td className="align-middle"> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Done" > <MDBIcon fas icon="check" color="success" size="lg" className="me-3" /> </MDBTooltip> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Remove" > <MDBIcon fas icon="trash-alt" color="danger" size="lg" className="me-3" /> </MDBTooltip> </td> </tr> <tr className="fw-normal"> <th className="border-0"> <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-8.webp" alt="avatar" className="shadow-1-strong rounded-circle" style={{ width: "45px", height: "auto" }} /> <span className="ms-2">Ben Smith</span> </th> <td className="border-0 align-middle"> <span>Ask for Lunch to Clients</span> </td> <td className="border-0 align-middle"> <h6 className="mb-0"> <MDBBadge className="mx-2" color="success"> Low priority </MDBBadge> </h6> </td> <td className="border-0 align-middle"> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Done" > <MDBIcon fas icon="check" color="success" size="lg" className="me-3" /> </MDBTooltip> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Remove" > <MDBIcon fas icon="trash-alt" color="danger" size="lg" className="me-3" /> </MDBTooltip> </td> </tr> <tr className="fw-normal"> <th className="border-0"> <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-2.webp" alt="avatar" className="shadow-1-strong rounded-circle" style={{ width: "45px", height: "auto" }} /> <span className="ms-2">Annie Hall</span> </th> <td className="border-0 align-middle"> <span>Create weekly tasks plan</span> </td> <td className="border-0 align-middle"> <h6 className="mb-0"> <MDBBadge className="mx-2" color="warning"> Medium priority </MDBBadge> </h6> </td> <td className="border-0 align-middle"> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Done" > <MDBIcon fas icon="check" color="success" size="lg" className="me-3" /> </MDBTooltip> <MDBTooltip tag="a" wrapperProps={{ href: "#!" }} title="Remove" > <MDBIcon fas icon="trash-alt" color="danger" size="lg" className="me-3" /> </MDBTooltip> </td> </tr> </MDBTableBody> </MDBTable> </MDBCardBody> </MDBScrollbar> </MDBCard> </MDBCol> </MDBRow> </MDBContainer> </section> ); }