Community Learn Tools Library Leisure
search
English
I can't set up the grid structure of a dashboard created with Tailwind CSS
P粉186904731
P粉186904731 2023-09-10 18:06:41
0
1
522

I'm writing a dashboard frontend using Tailwind CSS. I created a grid structure of the page and placed my components within it. However, all columns are equal in width and length. Some components usually need to look wider, so some of the components I added didn't match the Figma file. How can I solve this problem?

Code of my page:

// Components

// Layouts
import DashboardLayout from "@/layouts/dashboard"

// Icons
import { BoltIcon } from '@heroicons/react/24/solid'
import { Bars3CenterLeftIcon } from '@heroicons/react/24/solid'
import { EllipsisVerticalIcon } from '@heroicons/react/24/solid'
import { Squares2X2Icon } from '@heroicons/react/24/solid'
import { CheckIcon } from '@heroicons/react/24/solid'

// Types
type Props = {}

export default function OverviewTemplate({ }: Props) {
  return (
    <DashboardLayout>
      <div className="grid grid-cols-3 grid-rows-4 gap-x-2 gap-y-3 bg-gray-200 p-2">

        <div className="min-h-[50px] rounded-lg col-span-3">
          <div className="text-gray-900 text-2xl font-semibold leading-8 mb-4">Dashboard</div>
        </div>

        <div className="bg-white min-h-[50px] rounded-lg row-span-3">
          <div className="bg-white rounded-lg row-span-3">
            <div className="text-center">
              <svg className="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
              </svg>
              <p className="text-gray-900 text-sm font-medium leading-5 mt-1">Want to see metrics for your latest video? Upload and post a video to get started.</p>
              <div className="mt-6">
                <button type="button" className="inline-flex items-center rounded-md border border-transparent bg-indigo-900 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                  Upload Content
                </button>
              </div>
            </div>
          </div>
        </div>

        <div className="bg-white min-h-[50px] rounded-lg">
          <div className="sm:rounded-lg">
            <div className="px-4 py-5 sm:p-6">
              <h3 className="text-indigo-900 text-base font-semibold leading-6">Refer to your Network</h3>
              <div className="mt-2 max-w-xl text-indigo-900 text-sm font-medium leading-5 whitespace-nowrap">
                <p>Earn up to 15% recurring commission.</p>
              </div>
              <div className="mt-5">
                <button type="button" className="inline-flex items-center rounded-md border border-transparent bg-indigo-900 px-4 py-2 text-xs font-medium leading-4 text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Upload Content</button>
              </div>
            </div>
          </div>
        </div>

        <div className="bg-white min-h-[50px] rounded-lg row-span-3">
          <fieldset className="space-y-2">
            <div className="px-4 py-5 sm:px-6 flex flex-row">
              <Squares2X2Icon className="h-6 w-6 fill-indigo-500 mr-5" />
              <h3 className="text-gray-900 text-base font-semibold leading-6">Gamification area</h3>
            </div>

            <div className="relative flex items-start border-t border-gray-200">
              <div className="ml-3">
                <p className="text-black text-sm font-medium leading-5 mb-3 mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              </div>
            </div>

            <div className="relative flex items-start">
              <div className="ml-3">
                <button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md bg-emerald-50 border border-emerald-200 p-2">Complete your Profile</button>
              </div>
            </div>
            <div className="relative flex items-start">
              <div className="ml-3">
                <button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md border border-gray-200 p-2">Review  Content Guideline</button>
              </div>
            </div>
            <div className="relative flex items-start">
              <div className="ml-3">
                <button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md border border-gray-200 p-2">Meet-up with Creator Team</button>
              </div>
            </div>
            <div className="relative flex items-start">
              <div className="ml-3 text-sm">
                <button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md border border-gray-200 p-2">Upload First Content</button>
              </div>
            </div>
            <div className="relative flex items-start">
              <div className="ml-3">
                <button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md border border-gray-200 p-2">Share Your Content on Social Media</button>
              </div>
            </div>
            <div className="relative flex items-start">
              <div className="ml-3">
                <button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md border border-gray-200 p-2">Register Affiliate Program</button>
              </div>
            </div>
          </fieldset>
        </div>

        <div className="bg-white min-h-[50px] rounded-lg">
          <div className="overflow-hidden bg-white shadow sm:rounded-lg">
            <div className="px-4 py-5 sm:px-6 flex flex-row">
              <BoltIcon className="h-6 w-6 fill-indigo-500 mr-5" />
              <h3 className="text-gray-900 text-base font-semibold leading-6">What’s new on Omnicourse</h3>
            </div>
            <div className="px-4 py-5 sm:p-0">
              <dl className="">
                <div className="pt-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 border-t border-gray-200">
                  <dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">Product Development News</dt>
                </div>
                <div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                  <dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">Newly published Contents</dt>
                </div>
              </dl>
            </div>
          </div>
        </div>

        <div className="bg-white min-h-[50px] rounded-lg">
          <div className="overflow-hidden shadow sm:rounded-lg">
            <div className="px-4 py-5 sm:px-6 flex flex-row">
              <Bars3CenterLeftIcon className="h-6 w-6 fill-indigo-500 mr-5" />
              <h3 className="text-gray-900 text-base font-semibold leading-6 whitespace-nowrap">Tips & Tricks</h3>
              <EllipsisVerticalIcon className="h-6 w-6 fill-gray-400 ml-20" />
            </div>
            <div className="px-4 py-5 sm:p-0">
              <dl className="">
                <div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6 border-t border-gray-200">
                  <dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">How to Choose the best recording tool</dt>
                </div>
                <div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
                  <dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">5 Steps to Generate interesting Content</dt>
                </div>
                <div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
                  <dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">3 Ways to Earn Income via Omnicourse</dt>
                </div>
                <div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
                  <dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">Developing Productive Habits in 3 Steps</dt>
                </div>
              </dl>
            </div>
          </div>
        </div>
      </div>
    </DashboardLayout>
  )
}

Figma file example:

My page looks like this:

P粉186904731
P粉186904731

reply all(1)
P粉025632437
P粉0256324372023-09-11 09:16:05 1 floor

As mentioned in the comments, you can achieve this better using flex instead of grid

Output:

Code: 

<div class="flex h-screen flex-col bg-gray-300">
  <div>Dashboard</div>
  <div class="flex flex-1 gap-4">
    <div class="flex w-2/4 items-center justify-center rounded-lg bg-orange-300">Upload content</div>
    <div class="mb-7 flex w-1/4 flex-col gap-4">
      <div class="flex h-1/6 items-center justify-center rounded-lg bg-red-300">Content</div>
      <div class="flex h-2/6 items-center justify-center rounded-lg bg-yellow-300">Content</div>
      <div class="flex h-3/6 items-center justify-center rounded-lg bg-blue-300">Content</div>
    </div>
    <div class="flex h-5/6 w-1/4 items-center justify-center rounded-lg bg-green-300">Another content</div>
  </div>
</div>
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template