Поиск компонентов

Все компоненты

Просмотреть все доступные компоненты Tailwind CSS

Компонент лайтбокса изображения

Отзывчивый компонент Image Lightbox, выполненный в стиле Material Design, с триадической цветовой схемой и поддержкой темного режима. Он подходит для портфолио, демонстрирующего работы или продукты.

Открытый Предварительный просмотр

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
    <h2 class="mb-4 text-2xl font-semibold text-gray-800 dark:text-gray-200">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=1" alt="Portfolio Image 1" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=2" alt="Portfolio Image 2" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=3" alt="Portfolio Image 3" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=4" alt="Portfolio Image 4" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=5" alt="Portfolio Image 5" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=6" alt="Portfolio Image 6" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
    </div>
</div>

Компонент таблиц данных

Адаптивный компонент таблиц данных с поддержкой темного режима с использованием Tailwind CSS

Открытый Предварительный просмотр

                <div class="container mx-auto p-4 dark:bg-gray-900">

  <div class="data-table bg-white shadow-lg rounded-lg overflow-hidden dark:bg-gray-800">
    <table class="min-w-full leading-normal">
      <thead>
        <tr class="bg-gradient-to-br from-purple-500 to-pink-500 text-white">
          <th
            class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
          >
            Name
          </th>
          <th
            class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
          >
            Role
          </th>
          <th
            class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
          >
            Status
          </th>
          <th
            class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
          >
            Created At
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <div class="flex items-center">
              <div class="flex-shrink-0 w-10 h-10">
                <img
                  class="w-full h-full rounded-full"
                  src="https://randomuser.me/api/portraits/men/1.jpg"
                  alt=""
                />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 whitespace-no-wrap dark:text-white">
                  John Doe
                </p>
              </div>
            </div>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">Admin</p>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <span
              class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight"
            >
              <span
                aria-hidden
                class="absolute inset-0 bg-green-200 opacity-50 rounded-full"
              ></span>
              <span class="relative">Active</span>
            </span>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              2023-10-27
            </p>
          </td>
        </tr>
        <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <div class="flex items-center">
              <div class="flex-shrink-0 w-10 h-10">
                <img
                  class="w-full h-full rounded-full"
                  src="https://randomuser.me/api/portraits/women/2.jpg"
                  alt=""
                />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 whitespace-no-wrap dark:text-white">
                  Jane Smith
                </p>
              </div>
            </div>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              Editor
            </p>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <span
              class="relative inline-block px-3 py-1 font-semibold text-orange-900 leading-tight"
            >
              <span
                aria-hidden
                class="absolute inset-0 bg-orange-200 opacity-50 rounded-full"
              ></span>
              <span class="relative">Pending</span>
            </span>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              2023-10-27
            </p>
          </td>
        </tr>
        <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <div class="flex items-center">
              <div class="flex-shrink-0 w-10 h-10">
                <img
                  class="w-full h-10 h-10 rounded-full"
                  src="https://randomuser.me/api/portraits/men/3.jpg"
                  alt=""
                />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 whitespace-no-wrap dark:text-white">
                  Peter Jones
                </p>
              </div>
            </div>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              Viewer
            </p>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <span
              class="relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight"
            >
              <span
                aria-hidden
                class="absolute inset-0 bg-red-200 opacity-50 rounded-full"
              ></span>
              <span class="relative">Inactive</span>
            </span>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              2023-10-27
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Компонент кнопок OAuth

Отзывчивый компонент кнопок OAuth, разработанный для темного режима с аналогичной цветовой схемой, с множеством интерактивных элементов для социальных сетей.

Открытый Предварительный просмотр

                <div class="bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto text-white">
    <h2 class="text-2xl font-bold mb-4">Connect with Social Media</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="flex items-center justify-between bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <span>Continue with Google</span>
            <i class="fas fa-arrow-right"></i>
        </a>

        <a href="#" class="flex items-center justify-between bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <span>Continue with Facebook</span>
            <i class="fas fa-arrow-right"></i>
        </a>

        <a href="#" class="flex items-center justify-between bg-gradient-to-r from-green-500 to-blue-500 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
            <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <span>Continue with Twitter</span>
            <i class="fas fa-arrow-right"></i>
        </a>

        <a href="#" class="flex items-center justify-between bg-gradient-to-r from-red-500 to-orange-500 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
            <img src="https://randomuser.me/api/portraits/women/20.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <span>Continue with LinkedIn</span>
            <i class="fas fa-arrow-right"></i>
        </a>
    </div>
    <p class="text-center mt-4">Or</p>
    <button class="bg-gray-700 hover:bg-gray-600 rounded-lg w-full p-2 mt-2 text-white">Sign Up with Email</button>
</div>

Бруталистский компонент навигации по навигационной цепочке

Бруталистский навигационный компонент Breadcrumb для портфолио с яркой цветовой схемой и сложным макетом, с адаптивным дизайном и поддержкой темного режима.

Открытый Предварительный просмотр

                <nav class="text-sm font-mono">
  <ol class="list-none p-0 inline-flex">
    <li class="flex items-center">
      <a href="#" class="text-blue-500 dark:text-teal- गलती this looks like a typo, will fix to something like: dark:text-teal-300 hover:underline">Home</a>
      <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 67.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
    </li>
    <li class="flex items-center">
      <a href="#" class="text-blue-500 dark:text-teal-300 hover:underline">Projects</a>
      <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 67.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
    </li>
    <li>
      <span class="text-purple-700 dark:text-pink-400 font-bold">Current Project</span>
    </li>
  </ol>
</nav>

Компонент встраивания скевоморфной среды

Адаптивный компонент Media Embed Component со скевоморфизмом, аналогичной цветовой схемой и умеренной сложностью для бизнес-сайтов. Включает поддержку темного режима с использованием Tailwind CSS.

Открытый Предварительный просмотр

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-xl">
  <div class="relative pb-9/16 mb-4">
    <iframe class="absolute inset-0 w-full h-full rounded-md shadow-inner" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full mr-4 ring-2 ring-gray-400 dark:ring-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
    <div>
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Skeuomorphic Media Title</h3>
      <p class="text-gray-600 dark:text-gray-400 text-sm">Channel Name</p>
    </div>
  </div>
  <p class="text-gray-700 dark:text-gray-300">
    This is a description of the media content. It provides a brief overview 
    and context for the embedded video or audio. The design features subtle 
    shadows and gradients to mimic a tangible, real-world object.
  </p>
</div>

Рейтинговая система в стиле Glassmorphism с дополнительными цветами, разработанная для платформ социальных сетей. Он включает в себя адаптивную верстку и поддержку темного режима с использованием Tailwind CSS.

Открытый Предварительный просмотр

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="bg-white dark:bg-gray-800 backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 rounded-xl p-6 shadow-lg text-center w-full max-w-sm border border-gray-200 dark:border-gray-700">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Rate this content</h3>
    <div class="flex justify-center space-x-2">
      <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500 cursor-pointer" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
      <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500 cursor-pointer" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
      <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500 cursor-pointer" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
      <svg class="w-8 h-8 text-gray-300 dark:text-gray-600 cursor-pointer" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
      <svg class="w-8 h-8 text-gray-300 dark:text-gray-600 cursor-pointer" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
    </div>
  </div>
</div>

Ретро компонент CAPTCHA

Компонент CAPTCHA, выполненный в стиле ретро/винтаж в пастельных тонах, предназначен для панелей визуализации данных с поддержкой темного режима.

Открытый Предварительный просмотр

                <div class="flex flex-col items-center justify-center p-8 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Please Verify You're Not a Robot</h2>
    <p class="text-lg text-gray-600 dark:text-gray-200 mb-6">Select the images containing:</p>
    <div class="grid grid-cols-2 gap-4">
        <img src="https://picsum.photos/200/200?random=1" alt="CAPTCHA Option 1" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md"> 
        <img src="https://picsum.photos/200/200?random=2" alt="CAPTCHA Option 2" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md"> 
        <img src="https://picsum.photos/200/200?random=3" alt="CAPTCHA Option 3" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md"> 
        <img src="https://picsum.photos/200/200?random=4" alt="CAPTCHA Option 4" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md"> 
    </div>
    <div class="flex flex-col items-center mt-6">
        <label class="flex items-center mb-4">
            <input type="checkbox" class="text-purple-500 border-gray-300 dark:border-gray-600 rounded mr-2" />
            <span class="text-gray-800 dark:text-gray-100">I confirm I'm not a robot</span>
        </label>
        <button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded shadow-md transition duration-200">Verify</button>
    </div>
    <div class="mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
    </div>
    <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">User Avatar</p>
</div>

Раздел комментариев о брутализме

Компонент раздела комментариев в бруталистском стиле для портфолио, с аналогичными цветами, умеренной сложностью, отзывчивостью и поддержкой темного режима.

Открытый Предварительный просмотр

                <div class="container mx-auto p-4 bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 shadow-xl">
  <h2 class="text-2xl font-bold mb-6 border-b-4 border-yellow-500 pb-2">Comments</h2>
  <div class="space-y-6">
    <!-- Comment 1 -->
    <div class="bg-stone-200 dark:bg-stone-800 p-4 shadow-md border-2 border-yellow-600">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <h4 class="font-bold text-yellow-700 dark:text-yellow-300">John Doe</h4>
          <p class="text-sm text-stone-600 dark:text-stone-400">2 days ago</p>
        </div>
      </div>
      <p class="mb-4">This is a fantastic project! Really impressed with the use of colors and typography.</p>
      <div class="flex justify-end text-sm">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline mr-4">Reply</a>
        <a href="#" class="text-red-600 dark:text-red-400 hover:underline">Report</a>
      </div>
    </div>

    <!-- Comment 2 -->
    <div class="bg-stone-200 dark:bg-stone-800 p-4 shadow-md border-2 border-orange-600">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4 border-2 border-orange-500" src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar">
        <div>
          <h4 class="font-bold text-orange-700 dark:text-orange-300">Jane Smith</h4>
          <p class="text-sm text-stone-600 dark:text-stone-400">1 day ago</p>
        </div>
      </div>
      <p class="mb-4">Very inspiring work! The brutalist style is really well-executed here.</p>
      <div class="flex justify-end text-sm">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline mr-4">Reply</a>
        <a href="#" class="text-red-600 dark:text-red-400 hover:underline">Report</a>
      </div>
    </div>

        <!-- Add New Comment Form -->
    <div class="bg-stone-300 dark:bg-stone-700 p-6 shadow-inner border-2 border-red-600">
      <h4 class="text-lg font-bold mb-4 text-red-800 dark:text-red-200">Leave a Comment</h4>
      <form>
        <div class="mb-4">
          <label class="block text-stone-700 dark:text-stone-300 text-sm font-bold mb-2" for="name">
            Name
          </label>
          <input class="shadow appearance-none border border-red-500 dark:border-red-700 rounded w-full py-2 px-3 text-stone-700 dark:text-stone-900 leading-tight focus:outline-none focus:shadow-outline bg-yellow-100 dark:bg-yellow-900" id="name" type="text" placeholder="Your Name">
        </div>
        <div class="mb-4">
          <label class="block text-stone-700 dark:text-stone-300 text-sm font-bold mb-2" for="comment">
            Comment
          </label>
          <textarea class="shadow appearance-none border border-red-500 dark:border-red-700 rounded w-full py-2 px-3 text-stone-700 dark:text-stone-900 leading-tight focus:outline-none focus:shadow-outline bg-orange-100 dark:bg-orange-900 h-32" id="comment" placeholder="Your Comment"></textarea>
        </div>
        <div class="flex items-center justify-between">
          <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline border-2 border-black dark:border-white" type="button">
            Submit Comment
          </button>
        </div>
      </form>
    </div>

  </div>
</div>

Компонент оповещения об истечении времени ожидания сеанса

Компонент оповещения об истечении времени ожидания сеанса, который запускает увлекательную анимацию. Он отличается адаптивным дизайном, подходит для дашбордов с пастельной цветовой гаммой и поддержкой темных тем. Он включает в себя интерактивные элементы, позволяющие пользователям продлить свою сессию или выйти из системы.

Открытый Предварительный просмотр

                <div class="fixed inset-0 flex items-center justify-center bg-white dark:bg-gray-800 z-50 rounded-lg shadow-lg transition-all duration-300 p-5">
    <div class="bg-pastel-green rounded-md p-4 shadow-md transition-transform transform hover:scale-105">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Session Timeout Alert</h2>
        <p class="mt-2 text-gray-600 dark:text-gray-400">Your session is about to expire. Would you like to extend it?</p>
        <div class="flex justify-around mt-4">
            <button class="bg-blue-500 text-white dark:bg-blue-700 rounded-md px-4 py-2 transition-colors hover:bg-blue-600 dark:hover:bg-blue-600">Extend</button>
            <button class="bg-red-500 text-white dark:bg-red-700 rounded-md px-4 py-2 transition-colors hover:bg-red-600 dark:hover:bg-red-600">Log Out</button>
        </div>
    </div>
    <div class="absolute bottom-2 right-2">
        <img src="https://picsum.photos/50/50" alt="Illustrative Image" class="rounded-full border-2 border-white dark:border-gray-800 shadow-lg" />
    </div>
</div>

РетроБейджи

Компонент ретро/винтажных бейджей для бизнес/корпоративных сайтов с дополнительной цветовой гаммой. Простая верстка, адаптивный дизайн с поддержкой темной темы. Нет JavaScript.

Открытый Предварительный просмотр

                <div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-900">
  <!-- Badge 1 -->
  <span class="px-3 py-1 text-sm font-semibold text-purple-800 bg-purple-200 rounded-full dark:text-purple-200 dark:bg-purple-800">
    Vintage Vibe
  </span>

  <!-- Badge 2 -->
  <span class="px-3 py-1 text-sm font-semibold text-yellow-800 bg-yellow-200 rounded-full dark:text-yellow-200 dark:bg-yellow-800">
    Retro Style
  </span>

  <!-- Badge 3 -->
  <span class="px-3 py-1 text-sm font-semibold text-green-800 bg-green-200 rounded-full dark:text-green-200 dark:bg-green-800">
    Classic Look
  </span>
</div>

1 ... 240 241 242 243 244 ... 315

Поиск компонентов

Категории

Все компоненты

Компонент лайтбокса изображения

Компонент таблиц данных

Компонент кнопок OAuth

Бруталистский компонент навигации по навигационной цепочке

Компонент встраивания скевоморфной среды

Система оценки стекломорфизма

Ретро компонент CAPTCHA

Раздел комментариев о брутализме

Компонент оповещения об истечении времени ожидания сеанса

РетроБейджи