Published on

The 5 Really Obvious Ways To Build A Concept dabbly With Tailwind CSS Better That You Ever Did

Tags
CardsNavigationsPages
Concept dabbly

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.

The description of Concept dabbly ui component

A fun combination of twitter and instagram

Why use Tailwind CSS to make a Concept dabbly ui component?

  • It can make the building process of Concept dabbly ui component faster and more easily.
  • Enables building complex responsive layouts and components freely.
  • Minimum lines of CSS code in Concept dabbly component file.

The preview of Concept dabbly ui component

Free download of the Concept dabbly's source code

The source code of Concept dabbly ui component

<!Doctype html>
<html lang="en"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="./css/tailwind.css">
    <script defer="" src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

    <title>Social Media </title>

    <!-- <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css"> -->
</head>
<body class="bg-gray-50" style="">
<script defer="" src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<style>

    .hover-image-1{
        transition: ease-in-out 0.2s;
    }
    .hover-image-1:hover{
        width: 50px;
        height: 50px;
    }

</style>
    <div class="flex h-screen  dark:bg-gray-900" :class="{ 'overflow-hidden': isSideMenuOpen}">
      <!-- Desktop sidebar -->
      <aside class="z-20 hidden w-80 overflow-y-auto  md:block flex-shrink-0">
        <div class=" h-14 flex justify-center">
            <!-- <img src="./images/logo.png" class="w-32 h-24 mt-10"> -->
        </div>
 <div class=" mt-24 p-2 flex justify-center">
       <a href="#" class="relative flex flex-row items-center h-11 focus:outline-none hover:bg-gray-50 text-gray-600 hover:text-gray-800 border-l-4 border-transparent hover:border-indigo-500 pr-6">
            <span class="inline-flex justify-center items-center ml-4">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
            </span>
            <span class="ml-2 text-sm tracking-wide truncate">Home</span>
          </a>

        </div>

<!--          <div class=" my-5 flex justify-center">
            <button class="inline-block py-2 w-4/5 px-4 text-gray-700 font-semibold text-sm no-underline border-b-1 border-gray-300 p-2 rounded-md font-medium  hover:bg-gray-100 focus:bg-gray-100 focus:shadow-outline">#Explore</button>
        </div> -->

         <div class=" my-2 p-2 flex justify-center">
           <a href="#" class="relative flex flex-row items-center h-11 focus:outline-none hover:bg-gray-50 text-gray-600 hover:text-gray-800 border-l-4 border-transparent hover:border-indigo-500 pr-6">
            <span class="inline-flex justify-center items-center ml-4">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
            </span>
            <span class="ml-2 text-sm tracking-wide truncate">Notifications</span>
            <span class="px-2 py-0.5 ml-auto text-xs font-medium tracking-wide text-red-500 bg-red-50 rounded-full">1.2k</span>
          </a>
        </div>

         <div class=" my-2 p-2 flex justify-center">
            <a href="#" class="relative flex flex-row items-center h-11 focus:outline-none hover:bg-gray-50 text-gray-600 hover:text-gray-800 border-l-4 border-transparent hover:border-indigo-500 pr-6">
            <span class="inline-flex justify-center items-center ml-4">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
            </span>
            <span class="ml-2 text-sm tracking-wide truncate">Messages</span>
          </a>
        </div>

         <div class=" my-2 p-2 flex justify-center">
            <a href="#" class="relative flex flex-row items-center h-11 focus:outline-none hover:bg-gray-50 text-gray-600 hover:text-gray-800 border-l-4 border-transparent hover:border-indigo-500 pr-6">
            <span class="inline-flex justify-center items-center ml-4">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
            </span>
            <span class="ml-2 text-sm tracking-wide truncate">Friends</span>
            <span class="px-2 py-0.5 ml-auto text-xs font-medium tracking-wide text-green-500 bg-green-50 rounded-full">(15)</span>
          </a>
        </div>

         <div class=" my-2 p-2 flex justify-center">
            <a href="#" class="relative flex flex-row items-center h-11 focus:outline-none hover:bg-gray-50 text-gray-600 hover:text-gray-800 border-l-4 border-transparent hover:border-indigo-500 pr-6">
            <span class="inline-flex justify-center items-center ml-4">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
            </span>
            <span class="ml-2 text-sm tracking-wide truncate">Lists</span>
          </a>
        </div>

         <div class=" my-2 p-2 flex justify-center">
            <a href="#" class="relative flex flex-row items-center h-11 focus:outline-none hover:bg-gray-50 text-gray-600 hover:text-gray-800 border-l-4 border-transparent hover:border-indigo-500 pr-6">
            <span class="inline-flex justify-center items-center ml-4">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
            </span>
            <span class="ml-2 text-sm tracking-wide truncate">Profile</span>
          </a>
        </div>

         <div class=" my-2 p-2 flex justify-center">
           <a href="#" class="relative flex flex-row items-center h-11 focus:outline-none hover:bg-gray-50 text-gray-600 hover:text-gray-800 border-l-4 border-transparent hover:border-indigo-500 pr-6">
            <span class="inline-flex justify-center items-center ml-4">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
              </svg>
            </span>
            <span class="ml-2 text-sm tracking-wide truncate">Settings</span>
          </a>
        </div>

      </aside>

      <div class="flex flex-col flex-1">
        <header class="z-10 py-4  shadow-xs ">
          <div class="container flex items-center justify-between h-full px-6 mx-auto text-purple-600 dark:text-purple-300">
            <!-- Mobile hamburger -->
            <button class="p-1 -ml-1 mr-5 rounded-md md:hidden focus:outline-none focus:shadow-outline-purple">
              <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
              </svg>
            </button>
            <!-- Search input -->
<!--
  <input type="search" class="block md:hidden lg:hidden w-1/2 py-2 pl-4 px-4 pr-10 text-sm bg-gray-100 border border-transparent appearance-none rounded-tg placeholder-gray-400 focus:bg-gray-50 focus:outline-none focus:border-blue-500 focus:text-gray-900 focus:shadow-outline-blue" style="border-radius: 25px" placeholder="Search" autocomplete="off"> -->
  <div class="flex justify-between">
            <ul class="flex items-center flex-shrink-0 space-x-6">
              <!-- Profile menu -->
              <li class="relative ">
                <button class="align-middle rounded-full border-2 border-gray-300 shadow-lg  focus:shadow-outline-purple focus:outline-none">
                  <img class="object-cover w-10 h-10 rounded-full hover-image-1 flex-shrink-0" src="https://picsum.photos/200/200?i=203" alt="" aria-hidden="true">
                </button>
              </li>

                     <li class="relative">
                <button class="align-middle rounded-full border-2 border-gray-300 shadow-lg  focus:shadow-outline-purple focus:outline-none">
                  <img class="object-cover w-10 h-10 rounded-full hover-image-1 flex-shrink-0" src="https://picsum.photos/200/200?i=205" alt="" aria-hidden="true">
                </button>
              </li>

                     <li class="relative">
                <button class="align-middle rounded-full border-2 border-gray-300 shadow-lg  focus:shadow-outline-purple focus:outline-none">
                  <img class="object-cover w-10 h-10 rounded-full hover-image-1 flex-shrink-0" src="https://picsum.photos/200/200?i=207" alt="" aria-hidden="true">
                </button>
              </li>

                     <li class="relative">
                <button class="align-middle rounded-full border-2 border-gray-300 shadow-lg  focus:shadow-outline-purple focus:outline-none">
                  <img class="object-cover w-10 h-10 rounded-full hover-image-1 flex-shrink-0" src="https://picsum.photos/200/200?i=209" alt="" aria-hidden="true">
                </button>
              </li>

                  <li class="relative">
                <button class="align-middle rounded-full border-2 border-gray-300 shadow-lg  focus:shadow-outline-purple focus:outline-none">
                  <img class="object-cover w-10 h-10 rounded-full hover-image-1 flex-shrink-0" src="https://picsum.photos/200/200?i=2011" alt="" aria-hidden="true">
                </button>
              </li>

            </ul>

          </div>
        </header>
        <main class="h-full pb-16 overflow-y-auto">
          <!-- Remove everything INSIDE this div to a really blank page -->

<!-- Main Contents -->

<div class="block md:grid md:grid-flow-row-dense md:grid-cols-3 md:grid-rows-3 ">
 <div class="col-span-2">
    <div class="pt-10">
<form class="bg-white shadow rounded-lg mb-6 p-4 w-full md:w-3/4">
            <textarea name="message" placeholder="Type something..." class=" focus:outline-none  w-full rounded-lg p-2 text-sm bg-gray-100 border border-transparent appearance-none rounded-tg placeholder-gray-400"></textarea>
            <footer class="flex justify-between mt-2">
                <div class="flex gap-2">
                    <span class="flex items-center transition ease-out duration-300 hover:bg-blue-500 hover:text-white bg-blue-100 w-8 h-8 px-2 rounded-full text-blue-400 cursor-pointer">
                        <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
                    </span>
                    <span class="flex items-center transition ease-out duration-300 hover:bg-blue-500 hover:text-white bg-blue-100 w-8 h-8 px-2 rounded-full text-blue-400 cursor-pointer">
                        <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
                    </span>
                    <span class="flex items-center transition ease-out duration-300 hover:bg-blue-500 hover:text-white bg-blue-100 w-8 h-8 px-2 rounded-full text-blue-400 cursor-pointer">
                        <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
                    </span>
                </div>
                <button class="flex items-center py-2 px-4 rounded-lg text-sm bg-blue-600 text-white shadow-lg">Send
                    <svg class="ml-1" viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
                </button>
            </footer>
        </form>
</div>
<div class="bg-white shadow rounded-lg mb-6">
            <div class="flex flex-row px-2 py-3 mx-3">
                <div class="w-auto h-auto rounded-full">
                    <img class="w-12 h-12 object-cover rounded-full shadow cursor-pointer" alt="User avatar" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=2000&amp;q=80">
                </div>
                <div class="flex flex-col mb-2 ml-4 mt-1">
                    <div class="text-gray-600 text-sm font-semibold">John Doe</div>
                    <div class="flex w-full mt-1">
                        <div class="text-blue-700 font-base text-xs mr-1 cursor-pointer">
                            SEO
                        </div>
                        <div class="text-gray-400 font-thin text-xs">
                            • 30 seconds ago
                        </div>
                    </div>
                </div>
            </div>
            <div class="border-b border-gray-100"></div>
            <div class="text-gray-400 font-medium text-sm mb-7 mt-6 mx-3 px-2">
                <div class="grid grid-cols-6 col-span-2   gap-2  ">
                    <div class=" overflow-hidden rounded-xl col-span-3 max-h-[14rem]">
                        <img class="h-full w-full object-cover " src="https://images.unsplash.com/photo-1517487881594-2787fef5ebf7?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=735&amp;q=80" alt="">
                    </div>
                    <div class=" overflow-hidden rounded-xl col-span-3 max-h-[14rem]">
                        <img class="h-full w-full object-cover  " src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1399&amp;q=80" alt="">
                    </div>
                    <div class=" overflow-hidden rounded-xl col-span-2 max-h-[10rem]">
                        <img class="h-full w-full object-cover " src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1470&amp;q=80" alt="">
                    </div>
                    <div class=" overflow-hidden rounded-xl col-span-2 max-h-[10rem]">
                        <img class="h-full w-full object-cover " src="https://images.unsplash.com/photo-1503602642458-232111445657?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=687&amp;q=80" alt="">
                    </div>
                    <div class="relative overflow-hidden rounded-xl col-span-2 max-h-[10rem]">
                        <img class="h-full w-full object-cover " src="https://images.unsplash.com/photo-1560393464-5c69a73c5770?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=765&amp;q=80" alt="">
                    </div>
                </div>
            </div>
            <div class="text-gray-500 text-sm mb-6 mx-3 px-2">Lorem Ipsum is simply dummy ... <span class="text-gray-400">more</span></div>
            <div class="flex justify-start mb-4 border-t border-gray-100">
                <div class="flex w-full mt-1 pt-2 pl-5">
                    <span class="bg-white transition ease-out duration-300 hover:text-red-500 border w-8 h-8 px-2 pt-2 text-center rounded-full text-gray-400 cursor-pointer mr-2">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="14px" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
                        </svg>
                    </span>
                    <img class="inline-block object-cover w-8 h-8 text-white border-2 border-white rounded-full shadow-sm cursor-pointer" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
                    <img class="inline-block object-cover w-8 h-8 -ml-2 text-white border-2 border-white rounded-full shadow-sm cursor-pointer" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
                    <img class="inline-block object-cover w-8 h-8 -ml-2 text-white border-2 border-white rounded-full shadow-sm cursor-pointer" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="">
                    <img class="inline-block object-cover w-8 h-8 -ml-2 text-white border-2 border-white rounded-full shadow-sm cursor-pointer" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2.25&amp;w=256&amp;h=256&amp;q=80" alt="">
                </div>
                <div class="flex justify-end w-full mt-1 pt-2 pr-5">
                    <span class="transition ease-out duration-300 hover:bg-blue-50 bg-blue-100 w-8 h-8 px-2 py-2 text-center rounded-full text-blue-400 cursor-pointer mr-2">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="14px" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
                        </svg>
                    </span>
                    <span class="transition ease-out duration-300 hover:bg-gray-50 bg-gray-100 h-8 px-2 py-2 text-center rounded-full text-gray-100 cursor-pointer">
                        <svg class="h-4 w-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"></path>
                        </svg>
                    </span>
                </div>
            </div>
            <div class="flex w-full border-t border-gray-100">
                <div class="mt-3 mx-5 flex flex-row text-xs">
                    <div class="flex text-gray-700 font-normal rounded-md mb-2 mr-4 items-center">Comments:<div class="ml-1 text-gray-400 text-ms"> 30</div></div>
                    <div class="flex text-gray-700 font-normal rounded-md mb-2 mr-4 items-center">Views: <div class="ml-1 text-gray-400 text-ms"> 60k</div></div>
                </div>
                <div class="mt-3 mx-5 w-full flex justify-end text-xs">
                    <div class="flex text-gray-700  rounded-md mb-2 mr-4 items-center">Likes: <div class="ml-1 text-gray-400  text-ms"> 120k</div></div>
                </div>
            </div>

            <div class="relative flex items-center self-center w-full max-w-xl p-4 overflow-hidden text-gray-600 focus-within:text-gray-400">
                <img class="w-10 h-10 object-cover rounded-full shadow mr-2 cursor-pointer" alt="User avatar" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=2000&amp;q=80">
                <span class="absolute inset-y-0 right-0 flex items-center pr-6">
                    <button type="submit" class="p-1 focus:outline-none focus:shadow-none hover:text-blue-500">
                    <svg class="w-6 h-6 transition ease-out duration-300 hover:text-blue-500 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>

                    </button>
                </span>
                   <input type="search" class="w-full py-2 pl-4 pr-10 text-sm bg-gray-100 border border-transparent appearance-none rounded-tg placeholder-gray-400 focus:bg-white focus:outline-none focus:border-blue-500 focus:text-gray-900 focus:shadow-outline-blue" style="border-radius: 25px" placeholder="Post a comment..." autocomplete="off">
            </div>
        </div>

        <div class="bg-white shadow rounded-lg pb-4">
                <div class="flex flex-row px-2 py-3 mx-3">
                    <div class="w-auto h-auto rounded-full border-2 border-green-500">
                        <img class="w-12 h-12 object-cover rounded-full shadow cursor-pointer" alt="User avatar" src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=200&amp;q=200">
                    </div>
                    <div class="flex flex-col mb-2 ml-4 mt-1">
                        <div class="inline flex text-gray-600 text-sm font-semibold"><span class="flex-1 flex-shrink-0">Sara_Lauren</span>
                        <span class="mx-1 flex-1 flex-shrink-0"><svg viewBox="0 0 24 24" style="width: 20px; color:blue;" xmlns="http://www.w3.org/2000/svg"><g data-name="21. Verified" id="_21._Verified"><path d="M22.51,13.76a3,3,0,0,1,0-3.52l.76-1.05a1,1,0,0,0,.14-.9,1.018,1.018,0,0,0-.64-.64l-1.23-.4A2.987,2.987,0,0,1,19.47,4.4V3.1a1,1,0,0,0-1.31-.95l-1.24.4a3,3,0,0,1-3.35-1.09L12.81.41a1.036,1.036,0,0,0-1.62,0l-.76,1.05A3,3,0,0,1,7.08,2.55l-1.24-.4a1,1,0,0,0-1.31.95V4.4A2.987,2.987,0,0,1,2.46,7.25l-1.23.4a1.018,1.018,0,0,0-.64.64,1,1,0,0,0,.14.9l.76,1.05a3,3,0,0,1,0,3.52L.73,14.81a1,1,0,0,0-.14.9,1.018,1.018,0,0,0,.64.64l1.23.4A2.987,2.987,0,0,1,4.53,19.6v1.3a1,1,0,0,0,1.31.95l1.23-.4a2.994,2.994,0,0,1,3.36,1.09l.76,1.05a1.005,1.005,0,0,0,1.62,0l.76-1.05a3,3,0,0,1,3.36-1.09l1.23.4a1,1,0,0,0,1.31-.95V19.6a2.987,2.987,0,0,1,2.07-2.85l1.23-.4a1.018,1.018,0,0,0,.64-.64,1,1,0,0,0-.14-.9Zm-5.8-3.053-5,5a1,1,0,0,1-1.414,0l-3-3a1,1,0,1,1,1.414-1.414L11,13.586l4.293-4.293a1,1,0,0,1,1.414,1.414Z"/></g></svg></span></div>
                        <div class="flex w-full mt-1">
                            <div class="text-blue-700 font-base text-xs mr-1 cursor-pointer">
                                UX Design
                            </div>
                            <div class="text-gray-400 font-thin text-xs">
                                • 1 day ago
                            </div>
                        </div>
                    </div>
                </div>
                <div class="border-b border-gray-100 p-4"></div>
         <!--        <div class="text-gray-400 font-medium text-sm mb-7 mt-6 mx-3 px-2">
                    <img class="rounded w-full" src="https://picsum.photos/536/354">
                </div> -->
                <div class="text-gray-600 font-semibold  mb-2 mx-3 px-2">Love and gratitude</div>
                <div class="text-gray-500 text-sm mb-6 mx-3 px-2">Love and gratitude to both The Prime Minister, The Honorable Mia Amor Mottley and our President, Her Excellency The Most Honorable Dame Sandra Mason for trusting me with this honor!</div>
                <div class="flex justify-start mb-4 border-t border-gray-100">
                    <div class="flex w-full mt-1 pt-2 pl-5">
                        <span class="bg-white transition ease-out duration-300 hover:text-red-500 border w-8 h-8 px-2 pt-2 text-center rounded-full text-gray-400 cursor-pointer mr-2">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="14px" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
                            </svg>
                        </span>
                        <img class="inline-block object-cover w-8 h-8 text-white border-2 border-white rounded-full shadow-sm cursor-pointer" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
                        <img class="inline-block object-cover w-8 h-8 -ml-2 text-white border-2 border-white rounded-full shadow-sm cursor-pointer" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
                        <img class="inline-block object-cover w-8 h-8 -ml-2 text-white border-2 border-white rounded-full shadow-sm cursor-pointer" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="">
                        <img class="inline-block object-cover w-8 h-8 -ml-2 text-white border-2 border-white rounded-full shadow-sm cursor-pointer" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2.25&amp;w=256&amp;h=256&amp;q=80" alt="">
                    </div>
                    <div class="flex justify-end w-full mt-1 pt-2 pr-5">
                        <span class="transition ease-out duration-300 hover:bg-blue-50 bg-blue-100 w-8 h-8 px-2 py-2 text-center rounded-full text-blue-400 cursor-pointer mr-2">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="14px" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
                            </svg>
                        </span>
                        <span class="transition ease-out duration-300 hover:bg-gray-50 bg-gray-100 h-8 px-2 py-2 text-center rounded-full text-gray-100 cursor-pointer">
                            <svg class="h-4 w-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"></path>
                            </svg>
                        </span>
                    </div>
                </div>
                <div class="flex w-full border-t border-gray-100">
                    <div class="mt-3 mx-5 flex flex-row text-xs">
                        <div class="flex text-gray-700 font-normal rounded-md mb-2 mr-4 items-center">Comments:<div class="ml-1 text-gray-400 text-ms"> 30</div></div>
                        <div class="flex text-gray-700 font-normal rounded-md mb-2 mr-4 items-center">Views: <div class="ml-1 text-gray-400 text-ms"> 60k</div></div>
                    </div>
                    <div class="mt-3 mx-5 w-full flex justify-end text-xs">
                        <div class="flex text-gray-700  rounded-md mb-2 mr-4 items-center">Likes: <div class="ml-1 text-gray-400 text-ms"> 120k</div></div>
                    </div>
                </div>
                <div class="relative flex items-center self-center w-full max-w-xl p-4 overflow-hidden text-gray-600 focus-within:text-gray-400">
                    <img class="w-10 h-10 object-cover rounded-full shadow mr-2 cursor-pointer" alt="User avatar" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=2000&amp;q=80">
                    <span class="absolute inset-y-0 right-0 flex items-center pr-6">
                        <button type="submit" class="p-1 focus:outline-none focus:shadow-none hover:text-blue-500">
                        <svg class="w-6 h-6 transition ease-out duration-300 hover:text-blue-500 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>

                        </button>
                    </span>
                     <input type="search" class="w-full py-2 pl-4 pr-10 text-sm bg-gray-100 border border-transparent appearance-none rounded-tg placeholder-gray-400 focus:bg-white focus:outline-none focus:border-blue-500 focus:text-gray-900 focus:shadow-outline-blue" style="border-radius: 25px" placeholder="Post a comment..." autocomplete="off">
                </div>
            </div>

            <div class="bg-white shadow rounded-lg mt-10">
                <div class="flex flex-row px-2 py-3 mx-3">
                    <div class="w-auto h-auto rounded-full border-2 border-green-500">
                        <img class="w-12 h-12 object-cover rounded-full shadow cursor-pointer" alt="User avatar" src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=200&amp;q=200">
                    </div>
                    <div class="flex flex-col mb-2 ml-4 mt-1">
                        <div class="text-gray-600 text-sm font-semibold">Sara Lauren</div>
                        <div class="flex w-full mt-1">
                            <div class="text-blue-700 font-base text-xs mr-1 cursor-pointer">
                                UX Design
                            </div>
                            <div class="text-gray-400 font-thin text-xs">
                                • 1 day ago
                            </div>
                        </div>
                    </div>
                </div>
                <div class="border-b border-gray-100"></div>
                <div class="text-gray-400 font-medium text-sm mb-7 mt-6 mx-3 px-2">
                    <img class="rounded w-full" src="https://picsum.photos/536/354">
                </div>
                <div class="text-gray-600 font-semibold  mb-2 mx-3 px-2">Dummy text of the printing and typesetting industry</div>
                <div class="text-gray-500 text-sm mb-6 mx-3 px-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500</div>
                <div class="flex justify-start mb-4 border-t border-gray-100">
                    <div class="flex w-full mt-1 pt-2 pl-5">
                        <span class="bg-white transition ease-out duration-300 hover:text-red-500 border w-8 h-8 px-2 pt-2 text-center rounded-full text-gray-400 cursor-pointer mr-2">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="14px" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
                            </svg>
                        </span>
                        <img class="inline-block object-cover w-8 h-8 text-white border-2 border-white rounded-full shadow-sm cursor-pointer" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
                        <img class="inline-block object-cover w-8 h-8 -ml-2 text-white border-2 border-white rounded-full shadow-sm cursor-pointer" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
                        <img class="inline-block object-cover w-8 h-8 -ml-2 text-white border-2 border-white rounded-full shadow-sm cursor-pointer" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="">
                        <img class="inline-block object-cover w-8 h-8 -ml-2 text-white border-2 border-white rounded-full shadow-sm cursor-pointer" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2.25&amp;w=256&amp;h=256&amp;q=80" alt="">
                    </div>
                    <div class="flex justify-end w-full mt-1 pt-2 pr-5">
                        <span class="transition ease-out duration-300 hover:bg-blue-50 bg-blue-100 w-8 h-8 px-2 py-2 text-center rounded-full text-blue-400 cursor-pointer mr-2">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="14px" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
                            </svg>
                        </span>
                        <span class="transition ease-out duration-300 hover:bg-gray-50 bg-gray-100 h-8 px-2 py-2 text-center rounded-full text-gray-100 cursor-pointer">
                            <svg class="h-4 w-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"></path>
                            </svg>
                        </span>
                    </div>
                </div>
                <div class="flex w-full border-t border-gray-100">
                    <div class="mt-3 mx-5 flex flex-row text-xs">
                        <div class="flex text-gray-700 font-normal rounded-md mb-2 mr-4 items-center">Comments:<div class="ml-1 text-gray-400 text-ms"> 30</div></div>
                        <div class="flex text-gray-700 font-normal rounded-md mb-2 mr-4 items-center">Views: <div class="ml-1 text-gray-400 text-ms"> 60k</div></div>
                    </div>
                    <div class="mt-3 mx-5 w-full flex justify-end text-xs">
                        <div class="flex text-gray-700  rounded-md mb-2 mr-4 items-center">Likes: <div class="ml-1 text-gray-400 text-ms"> 120k</div></div>
                    </div>
                </div>
                <div class="relative flex items-center self-center w-full max-w-xl p-4 overflow-hidden text-gray-600 focus-within:text-gray-400">
                    <img class="w-10 h-10 object-cover rounded-full shadow mr-2 cursor-pointer" alt="User avatar" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=2000&amp;q=80">
                    <span class="absolute inset-y-0 right-0 flex items-center pr-6">
                        <button type="submit" class="p-1 focus:outline-none focus:shadow-none hover:text-blue-500">
                        <svg class="w-6 h-6 transition ease-out duration-300 hover:text-blue-500 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>

                        </button>
                    </span>
                     <input type="search" class="w-full py-2 pl-4 pr-10 text-sm bg-gray-100 border border-transparent appearance-none rounded-tg placeholder-gray-400 focus:bg-white focus:outline-none focus:border-blue-500 focus:text-gray-900 focus:shadow-outline-blue" style="border-radius: 25px" placeholder="Post a comment..." autocomplete="off">
                </div>
            </div>
 </div>
  <div class="hidden md:block lg:block py-8  sticky top-6">

  <input type="search" class="ml-16 w-3/4 py-2 pl-4 px-4 pr-10 text-sm bg-gray-100 border border-transparent appearance-none rounded-tg placeholder-gray-400 focus:bg-gray-50 focus:outline-none focus:border-blue-500 focus:text-gray-900 focus:shadow-outline-blue" style="border-radius: 25px" placeholder="Search" autocomplete="off">
<card class=" w-96 rounded-lg shadow-lg">

    <header class="font-bold text-2xl px-5 py-4">
      Who to follow
    </header>

    <main class="px-5">

      <content class="grid grid-cols-6">

        <div class="">
          <img src="https://picsum.photos/200/200" class="h-8 w-8 rounded-full">
        </div>

        <div class="col-span-3 px-1 font-semibold flex flex-col">
          <div class="text-sm"> Sangwa Albine </div>
          <div class="text-xm text-gray-700 font-light"> @__svngwa._ </div>
        </div>

        <div class="col-span-2 py-2 justify-self-end">
          <button class=" text-blue-500 text-xs font-semibold text-md rounded-full py-1 px-4">
            .Follow
          </button>
        </div>

      </content>


         <content class="grid grid-cols-6 mt-6">

        <div class="">
          <img src="https://picsum.photos/200/200?i=200" class="h-8 w-8 rounded-full">
        </div>

        <div class="col-span-3 px-1 font-semibold flex flex-col ">
          <div class="text-sm"> Mbonyintege </div>
          <div class="text-xm text-gray-700 font-light"> @Cpwr</div>
        </div>

        <div class="col-span-2 py-2 justify-self-end">
          <button class=" text-blue-500 text-xs font-semibold text-md rounded-full py-1 px-4">
            .Follow
          </button>
        </div>

      </content>


    </main>

  </card>

  <div class="max-w-sm rounded-lg overflow-hidden shadow-sm m-4 mt-5">

    <!--first trending tweet-->
    <div class="flex">
        <div class="flex-1">
            <p class="px-4 ml-2 mt-3 w-48 text-xs text-gray-400">1 . Trending</p>
            <h2 class="px-4 ml-2 w-48 font-bold ">#Microsoft363</h2>
            <p class="px-4 ml-2 mb-3 w-48 text-xs text-gray-400">5,466 posts</p>

        </div>
        <div class="flex-1 px-4 py-2 m-2">
            <a href="" class=" text-2xl rounded-full text-gray-400 hover:bg-gray-800 hover:text-blue-300 float-right">
                <svg class="m-2 h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
                    <path d="M19 9l-7 7-7-7"></path>
                </svg>
            </a>
        </div>
    </div>


    <!--second trending tweet-->

    <div class="flex">
        <div class="flex-1">
            <p class="px-4 ml-2 mt-3 w-48 text-xs text-gray-400">2 . Politics . Trending</p>
            <h2 class="px-4 ml-2 w-48 font-bold ">#HI-Fashion</h2>
            <p class="px-4 ml-2 mb-3 w-48 text-xs text-gray-400">8,464 posts</p>

        </div>
        <div class="flex-1 px-4 py-2 m-2">
            <a href="" class=" text-2xl rounded-full text-gray-400 hover:bg-gray-800 hover:text-blue-300 float-right">
                <svg class="m-2 h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
                    <path d="M19 9l-7 7-7-7"></path>
                </svg>
            </a>
        </div>
    </div>


    <!--third trending tweet-->

    <div class="flex">
        <div class="flex-1">
            <p class="px-4 ml-2 mt-3 w-48 text-xs text-gray-400">3 . Rock . Trending</p>
            <h2 class="px-4 ml-2 w-48 font-bold ">#Ferrari</h2>
            <p class="px-4 ml-2 mb-3 w-48 text-xs text-gray-400">5,586 Concepts</p>

        </div>
        <div class="flex-1 px-4 py-2 m-2">
            <a href="" class=" text-2xl rounded-full text-gray-400 hover:bg-gray-800 hover:text-blue-300 float-right">
                <svg class="m-2 h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
                    <path d="M19 9l-7 7-7-7"></path>
                </svg>
            </a>
        </div>
    </div>
    <!--show more-->
    <div class="flex">
        <div class="flex-1 p-4">
            <h2 class="px-4 ml-2 w-48 font-semibold text-sm text-blue-400">Show more</h2>
        </div>
    </div>

</div>
  </div>
</div>
        </main>
      </div>
    </div>

</body></html>

How to make a Concept dabbly with Tailwind CSS?

Install tailwind css of verion 1.9.6

Use the link html tag to import the stylesheet of Tailwind CSS of the version 1.9.6

<link href=https://unpkg.com/[email protected]/dist/tailwind.min.css rel="stylesheet">

All the unility class needed to make a Concept dabbly component

  • bg-gray-50
  • flex
  • h-screen
  • dark:bg-gray-900
  • overflow-hidden
  • z-20
  • hidden
  • w-80
  • overflow-y-auto
  • md:block
  • flex-shrink-0
  • h-14
  • w-32
  • h-24
  • mt-10
  • mt-24
  • p-2
  • relative
  • flex-row
  • h-11
  • hover:bg-gray-50
  • text-gray-600
  • hover:text-gray-800
  • border-l-4
  • border-transparent
  • hover:border-indigo-500
  • pr-6
  • inline-flex
  • ml-4
  • w-5
  • h-5
  • ml-2
  • text-sm
  • my-5
  • inline-block
  • py-2
  • w-4/5
  • px-4
  • text-gray-700
  • border-b-1
  • border-gray-300
  • hover:bg-gray-100
  • focus:bg-gray-100
  • my-2
  • px-2
  • py-0.5
  • ml-auto
  • text-xs
  • text-red-500
  • bg-red-50
  • text-green-500
  • bg-green-50
  • flex-col
  • flex-1
  • z-10
  • py-4
  • h-full
  • px-6
  • mx-auto
  • text-purple-600
  • dark:text-purple-300
  • p-1
  • -ml-1
  • mr-5
  • md:hidden
  • w-6
  • h-6
  • block
  • lg:hidden
  • w-1/2
  • pl-4
  • pr-10
  • bg-gray-100
  • focus:bg-gray-50
  • focus:border-blue-500
  • focus:text-gray-900
  • border-2
  • w-10
  • h-10
  • pb-16
  • md:grid
  • md:grid-flow-row-dense
  • md:grid-cols-3
  • md:grid-rows-3
  • pt-10
  • bg-white
  • mb-6
  • p-4
  • w-full
  • md:w-3/4
  • mt-2
  • gap-2
  • hover:bg-blue-500
  • hover:text-white
  • bg-blue-100
  • w-8
  • h-8
  • text-blue-400
  • bg-blue-600
  • text-white
  • ml-1
  • py-3
  • mx-3
  • w-auto
  • h-auto
  • w-12
  • h-12
  • mb-2
  • mt-1
  • text-blue-700
  • mr-1
  • text-gray-400
  • border-b
  • border-gray-100
  • mb-7
  • mt-6
  • grid
  • grid-cols-6
  • max-h-[14rem]
  • max-h-[10rem]
  • text-gray-500
  • justify-start
  • mb-4
  • border-t
  • pt-2
  • pl-5
  • hover:text-red-500
  • text-center
  • mr-2
  • border-white
  • -ml-2
  • pr-5
  • hover:bg-blue-50
  • text-gray-100
  • h-4
  • w-4
  • mt-3
  • mx-5
  • mr-4
  • text-ms
  • max-w-xl
  • focus-within:text-gray-400
  • absolute
  • right-0
  • hover:text-blue-500
  • focus:bg-white
  • pb-4
  • border-green-500
  • inline
  • mx-1
  • lg:block
  • py-8
  • sticky
  • top-6
  • ml-16
  • w-3/4
  • w-96
  • text-2xl
  • px-5
  • px-1
  • text-xm
  • text-blue-500
  • text-md
  • py-1
  • max-w-sm
  • m-4
  • mt-5
  • w-48
  • mb-3
  • m-2
  • hover:bg-gray-800
  • hover:text-blue-300
  • float-right

173 steps to make a Concept dabbly component with Tailwind CSS

  1. Control the background color of an element to gray-50 using the bg-gray-50 utilities.

  2. Use flex to create a block-level flex container.

  3. Use h-screen to make an element span the entire height of the viewport.

  4. Control the background color of an element to gray-900 using the dark:bg-gray-900 utilities in dark theme.

  5. Use overflow-hidden to clip any content within an element that overflows the bounds of that element.

  6. Control the stack order (or three-dimensional positioning) of an element to 20 in Tailwind, regardless of order it has been displayed, using the z-20 utilities.

  7. Use hidden to set an element to display: none and remove it from the page layout.

  8. Use w-80 to set an element to a fixed width(20rem).

  9. Use overflow-y-auto to allow vertical scrolling if needed.

  10. Use inline utilities to put the element on its own line and fill its parent at only medium screen sizes.

  11. Use flex to create a block-level flex container.

  12. Use h-14 to set an element to a fixed height(3.5rem).

  13. Use w-32 to set an element to a fixed width(8rem).

  14. Use h-24 to set an element to a fixed height(6rem).

  15. Control the margin on top side of an element to 2.5rem using the mt-10 utilities.

  16. Control the margin on top side of an element to 6rem using the mt-24 utilities.

  17. Control the padding on all sides of an element to 0.5rem using the p-2 utilities.

  18. Use relative to position an element according to the normal flow of the document.

  19. Use flex to create a block-level flex container.

  20. Use h-11 to set an element to a fixed height(2.75rem).

  21. Control the background color of an element to gray-50 using the hover:bg-gray-50 utilities on hover.

  22. Control the text color of an element to gray-600 using the text-gray-600 utilities.

  23. Control the text color of an element to gray-800 on hover using the hover:text-gray-800 utilities.

  24. Control the border color of an element to l-4 using the border-l-4 utilities.

  25. Control the border color of an element to transparent using the border-transparent utilities.

  26. Control the border color of an element to indigo-500 using the hover:border-indigo-500 utilities on hover.

  27. Control the padding on right side of an element to 1.5rem using the pr-6 utilities.

  28. Use inline-flex to create an inline flex container that flows with text.

  29. Control the margin on left side of an element to 1rem using the ml-4 utilities.

  30. Use w-5 to set an element to a fixed width(1.25rem).

  31. Use h-5 to set an element to a fixed height(1.25rem).

  32. Control the margin on left side of an element to 0.5rem using the ml-2 utilities.

  33. Control the text color of an element to sm using the text-sm utilities.

  34. Control the vertical margin of an element to 1.25rem using the my-5 utilities.

  35. Use inline-block utilities to wrap the element to prevent the text inside from extending beyond its parent.

  36. Control the vertical padding of an element to 0.5rem using the py-2 utilities.

  37. Use w-4/5 to set an element to a fixed width(4/5).

  38. Control the horizontal padding of an element to 1rem using the px-4 utilities.

  39. Control the text color of an element to gray-700 using the text-gray-700 utilities.

  40. Control the border color of an element to b-1 using the border-b-1 utilities.

  41. Control the border color of an element to gray-300 using the border-gray-300 utilities.

  42. Control the background color of an element to gray-100 using the hover:bg-gray-100 utilities on hover.

  43. Control the background color of an element to gray-100 using the focus:bg-gray-100 utilities on focus.

  44. Control the vertical margin of an element to 0.5rem using the my-2 utilities.

  45. Control the horizontal padding of an element to 0.5rem using the px-2 utilities.

  46. Control the vertical padding of an element to 0.5 using the py-0.5 utilities.

  47. Control the margin on left side of an element to auto using the ml-auto utilities.

  48. Control the text color of an element to xs using the text-xs utilities.

  49. Control the text color of an element to red-500 using the text-red-500 utilities.

  50. Control the background color of an element to red-50 using the bg-red-50 utilities.

  51. Control the text color of an element to green-500 using the text-green-500 utilities.

  52. Control the background color of an element to green-50 using the bg-green-50 utilities.

  53. Use flex to create a block-level flex container.

  54. Use flex to create a block-level flex container.

  55. Control the stack order (or three-dimensional positioning) of an element to 10 in Tailwind, regardless of order it has been displayed, using the z-10 utilities.

  56. Control the vertical padding of an element to 1rem using the py-4 utilities.

  57. Use h-full to set an element’s height to 100% of its parent, as long as the parent has a defined height.

  58. Control the horizontal padding of an element to 1.5rem using the px-6 utilities.

  59. Control the horizontal margin of an element to auto using the mx-auto utilities.

  60. Control the text color of an element to purple-600 using the text-purple-600 utilities.

  61. Control the text color of an element to purple-300 in dark theme using the dark:text-purple-300 utilities.

  62. Control the padding on all sides of an element to 0.25rem using the p-1 utilities.

  63. Control the margin on left side of an element to -0.25rem using the -ml-1 utilities.

  64. Control the margin on right side of an element to 1.25rem using the mr-5 utilities.

  65. Use hidden to set an element to display: none and remove it from the page layout at only medium screen sizes.

  66. Use w-6 to set an element to a fixed width(1.5rem).

  67. Use h-6 to set an element to a fixed height(1.5rem).

  68. Use inline utilities to put the element on its own line and fill its parent.

  69. Use hidden to set an element to display: none and remove it from the page layout at only large screen sizes.

  70. Use w-1/2 to set an element to a fixed width(1/2).

  71. Adjust the left padding of an element to 1rem using the pl-4 utilities class

  72. Control the padding on right side of an element to 2.5rem using the pr-10 utilities.

  73. Control the background color of an element to gray-100 using the bg-gray-100 utilities.

  74. Control the background color of an element to gray-50 using the focus:bg-gray-50 utilities on focus.

  75. Control the border color of an element to blue-500 using the focus:border-blue-500 utilities on focus.

  76. Control the text color of an element to gray-900 on focus using the focus:text-gray-900 utilities.

  77. Control the border color of an element to 0.5rem using the border-2 utilities.

  78. Use w-10 to set an element to a fixed width(2.5rem).

  79. Use h-10 to set an element to a fixed height(2.5rem).

  80. Control the padding on bottom side of an element to 4rem using the pb-16 utilities.

  81. Use grid to create a grid container at only medium screen sizes.

  82. Use grid to create a grid container at only medium screen sizes.

  83. Use grid to create a grid container at only medium screen sizes.

  84. Use grid to create a grid container at only medium screen sizes.

  85. Control the padding on top side of an element to 2.5rem using the pt-10 utilities.

  86. Control the background color of an element to white using the bg-white utilities.

  87. Control the margin on bottom side of an element to 1.5rem using the mb-6 utilities.

  88. Control the padding on all sides of an element to 1rem using the p-4 utilities.

  89. Use w-full to set an element to a 100% based width.

  90. Use md:w-3/4 to set an element to a fixed width(3/4) at only medium screen sizes.

  91. Control the margin on top side of an element to 0.5rem using the mt-2 utilities.

  92. To specify the width between columns, you can use the gap-2 utilities.

  93. Control the background color of an element to blue-500 using the hover:bg-blue-500 utilities on hover.

  94. Control the text color of an element to white on hover using the hover:text-white utilities.

  95. Control the background color of an element to blue-100 using the bg-blue-100 utilities.

  96. Use w-8 to set an element to a fixed width(2rem).

  97. Use h-8 to set an element to a fixed height(2rem).

  98. Control the text color of an element to blue-400 using the text-blue-400 utilities.

  99. Control the background color of an element to blue-600 using the bg-blue-600 utilities.

  100. Control the text color of an element to white using the text-white utilities.

  101. Control the margin on left side of an element to 0.25rem using the ml-1 utilities.

  102. Control the vertical padding of an element to 0.75rem using the py-3 utilities.

  103. Control the horizontal margin of an element to 0.75rem using the mx-3 utilities.

  104. The w-auto utility can be useful if you need to remove an element’s assigned width under a specific condition, like at a particular breakpoint.

  105. Use h-auto to set an element to a fixed height(auto).

  106. Use w-12 to set an element to a fixed width(3rem).

  107. Use h-12 to set an element to a fixed height(3rem).

  108. Control the margin on bottom side of an element to 0.5rem using the mb-2 utilities.

  109. Control the margin on top side of an element to 0.25rem using the mt-1 utilities.

  110. Control the text color of an element to blue-700 using the text-blue-700 utilities.

  111. Control the margin on right side of an element to 0.25rem using the mr-1 utilities.

  112. Control the text color of an element to gray-400 using the text-gray-400 utilities.

  113. Control the border color of an element to b using the border-b utilities.

  114. Control the border color of an element to gray-100 using the border-gray-100 utilities.

  115. Control the margin on bottom side of an element to 1.75rem using the mb-7 utilities.

  116. Control the margin on top side of an element to 1.5rem using the mt-6 utilities.

  117. Use grid to create a grid container.

  118. Use grid to create a grid container.

  119. Set the maximum width/height of an element using the max-h-[14rem] utilities.

  120. Set the maximum width/height of an element using the max-h-[10rem] utilities.

  121. Control the text color of an element to gray-500 using the text-gray-500 utilities.

  122. Use justify-start to justify items against the start of the container’s main axis.

  123. Control the margin on bottom side of an element to 1rem using the mb-4 utilities.

  124. Control the border color of an element to t using the border-t utilities.

  125. Control the padding on top side of an element to 0.5rem using the pt-2 utilities.

  126. Adjust the left padding of an element to 1.25rem using the pl-5 utilities class

  127. Control the text color of an element to red-500 on hover using the hover:text-red-500 utilities.

  128. Control the text color of an element to center using the text-center utilities.

  129. Control the margin on right side of an element to 0.5rem using the mr-2 utilities.

  130. Control the border color of an element to white using the border-white utilities.

  131. Control the margin on left side of an element to -0.5rem using the -ml-2 utilities.

  132. Control the padding on right side of an element to 1.25rem using the pr-5 utilities.

  133. Control the background color of an element to blue-50 using the hover:bg-blue-50 utilities on hover.

  134. Control the text color of an element to gray-100 using the text-gray-100 utilities.

  135. Use h-4 to set an element to a fixed height(1rem).

  136. Use w-4 to set an element to a fixed width(1rem).

  137. Control the margin on top side of an element to 0.75rem using the mt-3 utilities.

  138. Control the horizontal margin of an element to 1.25rem using the mx-5 utilities.

  139. Control the margin on right side of an element to 1rem using the mr-4 utilities.

  140. Control the text color of an element to ms using the text-ms utilities.

  141. Set the maximum width/height of an element using the max-w-xl utilities.

  142. Control the text color of an element to gray-400undefined using the focus-within:text-gray-400 utilities.

  143. Use absolute to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.

  144. Use the right-0 utilities to set the right position of a positioned element to 0rem.

  145. Control the text color of an element to blue-500 on hover using the hover:text-blue-500 utilities.

  146. Control the background color of an element to white using the focus:bg-white utilities on focus.

  147. Control the padding on bottom side of an element to 1rem using the pb-4 utilities.

  148. Control the border color of an element to green-500 using the border-green-500 utilities.

  149. Use inline utilities to control the flow of text inside the element to wrap normally.

  150. Control the horizontal margin of an element to 0.25rem using the mx-1 utilities.

  151. Use inline utilities to put the element on its own line and fill its parent at only large screen sizes.

  152. Control the vertical padding of an element to 2rem using the py-8 utilities.

  153. Use sticky to position an element as relative until it crosses a specified threshold, then treat it as fixed until its parent is off screen.

  154. Use the top-6 utilities to set the top position of a positioned element to 1.5rem.

  155. Control the margin on left side of an element to 4rem using the ml-16 utilities.

  156. Use w-3/4 to set an element to a fixed width(3/4).

  157. Use w-96 to set an element to a fixed width(24rem).

  158. Control the text color of an element to 2xl using the text-2xl utilities.

  159. Control the horizontal padding of an element to 1.25rem using the px-5 utilities.

  160. Control the horizontal padding of an element to 0.25rem using the px-1 utilities.

  161. Control the text color of an element to xm using the text-xm utilities.

  162. Control the text color of an element to blue-500 using the text-blue-500 utilities.

  163. Control the text color of an element to md using the text-md utilities.

  164. Control the vertical padding of an element to 0.25rem using the py-1 utilities.

  165. Set the maximum width/height of an element using the max-w-sm utilities.

  166. Control the margin on all sides of an element to 1rem using the m-4 utilities.

  167. Control the margin on top side of an element to 1.25rem using the mt-5 utilities.

  168. Use w-48 to set an element to a fixed width(12rem).

  169. Control the margin on bottom side of an element to 0.75rem using the mb-3 utilities.

  170. Control the margin on all sides of an element to 0.5rem using the m-2 utilities.

  171. Control the background color of an element to gray-800 using the hover:bg-gray-800 utilities on hover.

  172. Control the text color of an element to blue-300 on hover using the hover:text-blue-300 utilities.

  173. Use float-right to float an element to the right of its container.

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to make a Concept dabbly components, learn and follow along to implement your own components.