Published on

How to Make A Card Animate Mobil Dropdown With Tailwind CSS?

Card animate mobil dropdown

As a FrontEnd technology blogger, it's important to stay up-to-date with the latest trends and tools in the industry. One such tool that has gained a lot of popularity in recent times is Tailwind CSS. It is a utility-first CSS framework that helps developers create beautiful and responsive designs with ease. In this article, we will explore how to create a Card animate mobil dropdown ui component with Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides pre-defined CSS classes to developers. These classes can be used to create custom designs quickly and efficiently. It is highly customizable and can be used with any JavaScript framework or library.

The description of Card animate mobil dropdown ui component

A Card animate mobil dropdown ui component is a dropdown menu that is displayed when a user clicks on a button or icon. It is commonly used in mobile applications to save screen space. The dropdown menu appears as a card that slides down from the top of the screen and overlays the content.

Why use Tailwind CSS to create a Card animate mobil dropdown ui component?

Tailwind CSS provides pre-defined CSS classes that can be used to create a Card animate mobil dropdown ui component quickly and efficiently. It also provides responsive design classes that can be used to make the dropdown menu responsive for different screen sizes.

The preview of Card animate mobil dropdown ui component

Free download of the Card animate mobil dropdown's source code

The source code of Card animate mobil dropdown ui component

To create a Card animate mobil dropdown ui component with Tailwind CSS, we will use the following HTML and CSS code.

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<section class="relative m-2 font-sans leading-normal">
  <div class="m-4 overflow-hidden rounded-3xl border border-gray-600 bg-white shadow-lg sm:flex">
    <div class="flex flex-wrap px-6 py-4">
      <tr>
        <td class="px-6 py-4 ">
          <div class="mr-auto flex  items-center p-1 pl-4 pr-1">
            <div class="mr-auto p-2 pr-4 text-sm font-medium text-gray-900 text-red-600">
              1
              <p class="text-red-600">İD</p>
            </div>
          </div>
        </td>
        <td class="px-6 py-4 ">
          <div class="mr-auto flex  items-center p-1 pl-4 pr-1">
            <div class="mr-auto p-2 pr-4 text-sm font-medium text-gray-900">
              Laboratuvar Yönetim Sertifika Paketi Paket Adı
              <p class="text-red-600">Paket Adı</p>
            </div>
          </div>
        </td>
        <td class="px-6 py-4 ">
          <div class="mr-auto flex  items-center p-1 pl-4 pr-1">
            <div class="mr-auto p-2 pr-4 text-sm font-medium text-gray-900">
              Laboratuvar Yönetim Sertifika Paketi Paket Bilgi
              <p class="text-red-600">Paket Bilgi</p>
            </div>
          </div>
        </td>
        <td class="px-6 py-4 ">
          <div class="mr-auto flex  items-center p-1 pl-4 pr-1">
            <div class="mr-auto p-2 pr-4 text-sm font-medium text-gray-900">
              PKT1
              <p class="text-red-600">Paket Kodu</p>
            </div>
          </div>
        </td>
        <td class="flex flex-row px-6 py-4">
          <!-- <div class="ml-auto mr-auto ">
           <span for="remembera" class=" flex items-center px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 hover:bg-green-200 text-black">
             <div class=" m-2 flex items-center">
               <input id="remembera" name="remember_me" type="checkbox"
               class="h-4 w-4 bg-blue-500 focus:ring-blue-400 border-gray-300 rounded">
               <label for="remembera" class="m-2 block text-sm text-gray-900">
                 Dersi Seç
               </label>
             </div>
           </span>
           <span for="rememberb" class=" flex items-center px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 hover:bg-green-200 text-black">
             <div class=" m-2 flex items-center">
               <input id="rememberb" name="remember_me" type="checkbox"
               class="h-4 w-4 bg-blue-500 focus:ring-blue-400 border-gray-300 rounded">
               <label for="rememberb" class="m-2 block text-sm text-gray-900">
                 Sınavı Seç
               </label>
             </div>
           </span>
           </div> -->
          <div class="static mx-6 mt-1 mb-2 rounded-full py-3 px-6 font-bold text-white">
            <div
              @click.away="open = false"
              class="absolute top-0 right-0 mr-4 md:top-20"
              x-data="{ open: false }"
            >
              <button
                @click="open = !open"
                class="flex w-full flex-row items-center space-x-2 rounded-tr-2xl bg-blue-800 px-4 py-2 text-left text-sm font-semibold focus:bg-blue-800 md:mt-0 md:ml-4 md:inline md:w-auto "
              >
                <svg
                  fill="currentColor"
                  viewBox="0 0 20 20"
                  :class="{'rotate-180': open, 'rotate-0': !open}"
                  class="inline h-4 w-4 transform transition-transform duration-200"
                >
                  <path
                    fill-rule="evenodd"
                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                    clip-rule="evenodd"
                  ></path>
                </svg>
              </button>
              <div
                x-show="open"
                x-transition:enter="transition ease-out duration-100"
                x-transition:enter-start="transform opacity-0 scale-95"
                x-transition:enter-end="transform opacity-100 scale-100"
                x-transition:leave="transition ease-in duration-75"
                x-transition:leave-start="transform opacity-100 scale-100"
                x-transition:leave-end="transform opacity-0 scale-95"
                class="absolute right-0 mt-2 w-40 origin-top-right rounded-md shadow-lg md:w-48"
              >
                <div
                  class="rounded-sm border border-gray-600 bg-white py-2 text-sm text-blue-800 shadow-sm"
                >
                  <a
                    class="focus:shadow-outline mt-2 block bg-white px-4 py-2 text-sm hover:bg-indigo-100 focus:bg-gray-200 focus:text-gray-900 focus:outline-none md:mt-0"
                    href="#"
                    >Dersi Tamamlat</a
                  >
                  <a
                    class="focus:shadow-outline mt-2 block bg-white px-4 py-2 text-sm hover:bg-indigo-100 focus:bg-gray-200 focus:text-gray-900 focus:outline-none md:mt-0"
                    href="#"
                    >Konuları İzlet</a
                  >
                  <a
                    class="focus:shadow-outline mt-2 block bg-white px-4 py-2 text-sm hover:bg-indigo-100 focus:bg-gray-200 focus:text-gray-900 focus:outline-none md:mt-0"
                    href="#"
                    >Videoları İzlet</a
                  >
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </div>
  </div>
</section>
<section class="relative m-2 font-sans leading-normal">
  <div class="m-4 overflow-hidden rounded-3xl border border-gray-600 bg-white shadow-lg sm:flex">
    <div class="flex flex-wrap px-6 py-4">
      <tr>
        <td class="px-6 py-4 ">
          <div class="mr-auto flex  items-center p-1 pl-4 pr-1">
            <div class="mr-auto p-2 pr-4 text-sm font-medium text-gray-900 text-red-600">
              1
              <p class="text-red-600">İD</p>
            </div>
          </div>
        </td>
        <td class="px-6 py-4 ">
          <div class="mr-auto flex  items-center p-1 pl-4 pr-1">
            <div class="mr-auto p-2 pr-4 text-sm font-medium text-gray-900">
              Laboratuvar Yönetim Sertifika Paketi Paket Adı
              <p class="text-red-600">Paket Adı</p>
            </div>
          </div>
        </td>
        <td class="px-6 py-4 ">
          <div class="mr-auto flex  items-center p-1 pl-4 pr-1">
            <div class="mr-auto p-2 pr-4 text-sm font-medium text-gray-900">
              Laboratuvar Yönetim Sertifika Paketi Paket Bilgi
              <p class="text-red-600">Paket Bilgi</p>
            </div>
          </div>
        </td>
        <td class="px-6 py-4 ">
          <div class="mr-auto flex  items-center p-1 pl-4 pr-1">
            <div class="mr-auto p-2 pr-4 text-sm font-medium text-gray-900">
              PKT1
              <p class="text-red-600">Paket Kodu</p>
            </div>
          </div>
        </td>
        <td class="flex flex-row px-6 py-4">
          <!-- <div class="ml-auto mr-auto ">
           <span for="remembera" class=" flex items-center px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 hover:bg-green-200 text-black">
             <div class=" m-2 flex items-center">
               <input id="remembera" name="remember_me" type="checkbox"
               class="h-4 w-4 bg-blue-500 focus:ring-blue-400 border-gray-300 rounded">
               <label for="remembera" class="m-2 block text-sm text-gray-900">
                 Dersi Seç
               </label>
             </div>
           </span>
           <span for="rememberb" class=" flex items-center px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 hover:bg-green-200 text-black">
             <div class=" m-2 flex items-center">
               <input id="rememberb" name="remember_me" type="checkbox"
               class="h-4 w-4 bg-blue-500 focus:ring-blue-400 border-gray-300 rounded">
               <label for="rememberb" class="m-2 block text-sm text-gray-900">
                 Sınavı Seç
               </label>
             </div>
           </span>
           </div> -->
          <div class="static mx-6 mt-1 mb-2 rounded-full py-3 px-6 font-bold text-white">
            <div
              @click.away="open = false"
              class="absolute top-0 right-10 mr-4 md:top-20"
              x-data="{ open: false }"
            >
              <button
                @click="open = !open"
                class="flex w-full animate-bounce flex-row items-center space-x-2 rounded-b-full border-b border-r border-l border-gray-600 bg-blue-400 px-4 py-2 text-left text-sm font-semibold focus:bg-blue-400 md:mt-0 md:ml-4 md:inline md:w-auto "
              >
                <svg
                  fill="currentColor"
                  viewBox="0 0 20 20"
                  :class="{'rotate-180': open, 'rotate-0': !open}"
                  class="inline h-4 w-4 transform transition-transform duration-200"
                >
                  <path
                    fill-rule="evenodd"
                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                    clip-rule="evenodd"
                  ></path>
                </svg>
              </button>
              <div
                x-show="open"
                x-transition:enter="transition ease-out duration-100"
                x-transition:enter-start="transform opacity-0 scale-95"
                x-transition:enter-end="transform opacity-100 scale-100"
                x-transition:leave="transition ease-in duration-75"
                x-transition:leave-start="transform opacity-100 scale-100"
                x-transition:leave-end="transform opacity-0 scale-95"
                class="absolute right-0 mt-2 w-40 origin-top-right rounded-md shadow-lg md:w-48"
              >
                <div
                  class="rounded-sm border border-gray-600 bg-white py-2 text-sm text-blue-800 shadow-sm"
                >
                  <a
                    class="focus:shadow-outline mt-2 block bg-white px-4 py-2 text-sm hover:bg-indigo-100 focus:bg-gray-200 focus:text-gray-900 focus:outline-none md:mt-0"
                    href="#"
                    >Dersi Tamamlat</a
                  >
                  <a
                    class="focus:shadow-outline mt-2 block bg-white px-4 py-2 text-sm hover:bg-indigo-100 focus:bg-gray-200 focus:text-gray-900 focus:outline-none md:mt-0"
                    href="#"
                    >Konuları İzlet</a
                  >
                  <a
                    class="focus:shadow-outline mt-2 block bg-white px-4 py-2 text-sm hover:bg-indigo-100 focus:bg-gray-200 focus:text-gray-900 focus:outline-none md:mt-0"
                    href="#"
                    >Videoları İzlet</a
                  >
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </div>
  </div>
</section>

How to create a Card animate mobil dropdown with Tailwind CSS?

To create a Card animate mobil dropdown ui component with Tailwind CSS, follow the steps below:

  1. Create a button or icon that will trigger the dropdown menu.
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Dropdown
</button>
  1. Create a card element that will contain the dropdown menu.
<div class="absolute top-0 left-0 w-full h-full bg-gray-900 bg-opacity-50 flex items-center justify-center hidden">
  <div class="bg-white rounded-lg w-4/5 md:w-1/2 lg:w-1/3">
    <!-- Dropdown menu items go here -->
  </div>
</div>
  1. Add JavaScript code to show and hide the dropdown menu.
const dropdownButton = document.querySelector('.dropdown-button');
const dropdownMenu = document.querySelector('.dropdown-menu');

dropdownButton.addEventListener('click', () => {
  dropdownMenu.classList.toggle('hidden');
});
  1. Add Tailwind CSS classes to style the dropdown menu.
/* Center the card element vertically and horizontally */
.dropdown-menu {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Animate the card element when it appears */
.dropdown-menu.animate {
  animation: slide-down 0.5s ease-out;
}

@keyframes slide-down {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

Conclusion

In this article, we have learned how to create a Card animate mobil dropdown ui component with Tailwind CSS. Tailwind CSS provides pre-defined CSS classes that can be used to create custom designs quickly and efficiently. It also provides responsive design classes that can be used to make the dropdown menu responsive for different screen sizes. With Tailwind CSS, developers can create beautiful and responsive designs with ease.