Not able to position Div using tailwindCSS

Question

This is my react code:

<div>
      <div>
        <div className=" grid gap-4 grid-row-4 grid-flow-col">
          <div className="row-span-4 h-2/5 w-auto p-2 bg-white">
            <p className="m-4 font-bold">
              8 task completed out of 10
              <br></br>
              <h4 className="font-bold">23 December, Sunday</h4>
            </p>
            <div className="m-4"> Calender </div>
            <div className="m-4 p-4 shadow-md">
              <p>
                <h4 className="font-bold">Send benefit review by Sunday</h4>
                <span className="text-gray-600">
                  Due date: December 23, 2018
                </span>
                <br></br>
                Image: George Fields
              </p>
            </div>
            <div className="m-4 p-4 shadow-md">
              <p>
                <h4 className="font-bold">Invite to office meet-up</h4>
                <span className="text-gray-600">
                  Due date: December 23, 2018
                </span>
                <br></br>
                Image: Rebecca Moore
              </p>
            </div>

            <div className="m-4 p-4 shadow-md">
              <p>
                <h4 className="font-bold">Office meet-up</h4>
                <span className="text-gray-600">
                  Due date: December 23, 2018
                </span>
                <br></br>
                Image: Lindsey Stroud
                <h2 className="text-blue-1000 font-bold pt-4"> Show More </h2>
              </p>
            </div>
          </div>

          <div className="h-80 w-1/2 p-2 bg-white">
            <h4 className="font-bold"> Deals </h4>

            <AreaChart />
          </div>
          <div className="h-80 w-1/2 p-2  bg-white">
            <h4 className="font-bold"> Tasks</h4>
            <ul className="absolute inset-10">
              <li className="text-green-600 font-bold">Active</li>
              <li className="text-yellow-600 font-bold">Completed</li>
              <li className="text-red-600 font-bold">Ended</li>
            </ul>
            <PieChart />
          </div>
        </div>
      </div>
    </div>

I am not able to position these grids, I don't know where to put the class on and also which classes exactly, please bear in mind this is my day 2 of learning tailwind, any help would be appreciated. I am also attaching the picture of my UI and will point to the area I want to position this grid layout to. Thanks

Answer 1

I tried to use your code as much as possible, here is the result:

The code:

      <div className="flex flex-row ">
        <div className="flex flex-col w-96">
          <div className="px-2">Placeholder</div>
          <div className="px-2">Placeholder</div>
          <div className="px-2">Placeholder</div>
          <div className="px-2">Placeholder</div>
          <div className="px-2">Placeholder</div>
          <div className="px-2">Placeholder</div>
        </div>

        <div className="grid sm:grid-cols-2 bg-gray-200 w-full">
          <p className="m-4 font-bold bg-white">
            8 task completed out of 10
            <br></br>
            <h4 className="font-bold">23 December, Sunday</h4>
          </p>
          <div className="m-4 h-80 w-1/2 p-2 bg-white">
            <h4 className="font-bold"> Deals </h4>
            AreaChart
          </div>
        </div>
      </div>