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

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

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

Компонент окна чата

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

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

                <div class="flex flex-col max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 ease-in-out hover:shadow-2xl">
    <div class="flex items-center justify-between p-4 border-b-2 border-gray-200 dark:border-gray-700">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chat</h2>
        <button class="focus:outline-none">
            <svg class="h-6 w-6 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 transition-colors duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.55 1.21a1 1 0 01-1.45-1.21zM4 6h16M4 12h16M4 18h16" />
            </svg>
        </button>
    </div>
    <div class="overflow-auto max-h-96 p-4">
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-lg shadow-md transition-transform transform hover:scale-105 duration-150">
                <p class="text-gray-800 dark:text-gray-200">Hello! How can I help you today?</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/thumb/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-lg shadow-md transition-transform transform hover:scale-105 duration-150">
                <p class="text-gray-800 dark:text-gray-200">I have a question about my order.</p>
            </div>
        </div>
    </div>
    <div class="p-4 border-t-2 border-gray-200 dark:border-gray-700">
        <form class="flex">
            <input type="text" placeholder="Type your message..." class="flex-grow p-2 border rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 transition duration-200 ease-in-out">
            <button type="submit" class="ml-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200 ease-in-out">
                Send
            </button>
        </form>
    </div>
</div>

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

Набор кнопок OAuth, выполненных в брутальной эстетике и Tailwind CSS, с отзывчивыми эффектами и поддержкой темных тем.

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

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <h1 class="text-4xl font-extrabold text-black dark:text-white mb-5">Login with</h1>
    <div class="flex space-x-4">
        <a href="#" class="bg-blue-500 dark:bg-blue-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-blue-400 dark:hover:bg-blue-600 transition-all duration-300 transform hover:scale-105">
            <img src="https://picsum.photos/30?random=1" alt="OAuth Provider 1" class="inline-block mr-2 rounded-full">
            Provider 1
        </a>
        <a href="#" class="bg-red-500 dark:bg-red-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-red-400 dark:hover:bg-red-600 transition-all duration-300 transform hover:scale-105">
            <img src="https://picsum.photos/30?random=2" alt="OAuth Provider 2" class="inline-block mr-2 rounded-full">
            Provider 2
        </a>
        <a href="#" class="bg-green-500 dark:bg-green-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-green-400 dark:hover:bg-green-600 transition-all duration-300 transform hover:scale-105">
            <img src="https://picsum.photos/30?random=3" alt="OAuth Provider 3" class="inline-block mr-2 rounded-full">
            Provider 3
        </a>
    </div>
</div>

Всплывающие уведомления

Компонент всплывающих уведомлений со стилем Glassmorphism, отзывчивыми эффектами и поддержкой темной темы с использованием Tailwind CSS

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

                <div class="fixed bottom-0 right-0 mb-4 mr-4">
  <div class="bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden mx-auto" style="max-width: 300px;">
    <div class="flex items-center justify-between px-4 py-2">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
        <p class="text-gray-700 dark:text-gray-200 text-sm font-semibold ml-2">User Name</p>
      </div>
      <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
        <svg class="h-4 w-4" 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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
    <div class="px-4 py-2">
      <p class="text-gray-600 dark:text-gray-300 text-sm">This is a toast notification.</p>
    </div>
  </div>
</div>

Компонент CAPTCHA

Компонент CAPTCHA с темным режимом и адаптивным дизайном.

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

                <div class="flex items-center justify-center h-screen bg-gray-900">
  <div class="bg-gray-800 p-6 rounded-md shadow-md">
    <h2 class="text-lg font-semibold text-white mb-4">CAPTCHA Challenge</h2>
    <div class="flex items-center justify-center mb-4">
      <img src="https://picsum.photos/150/60" alt="CAPTCHA Image" class="mr-4 rounded-md">
      <input type="text" class="border border-gray-700 bg-gray-900 text-white rounded-md px-3 py-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
    </div>
    <button class="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">Verify</button>
  </div>
</div>

Компонент входа через социальные сети - Микровзаимодействия

Карточка компонента входа через социальные сети, использующая Tailwind CSS, с микровзаимодействиями на кнопках (эффект масштабирования при наведении/фокусе), отзывчивостью (максимальная ширина по центру) и поддержкой темных тем. Использует изображение-заполнитель из picsum.photos и встроенные SVG для значков социальных сетей. Нет JavaScript.

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

                <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
  <img src="https://picsum.photos/400/200" alt="Login Header" class="w-full h-32 object-cover rounded-t-lg">
  <div class="p-6">
    <h2 class="text-center text-2xl font-bold text-gray-800 dark:text-white mb-6">Login or Sign Up</h2>
    <div class="flex flex-col gap-4">

      <!-- Google Button -->
      <button class="flex items-center justify-center w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 ease-in-out transform hover:scale-105 focus:scale-105">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M19 9.4v2.9h-4.6V14h4.6c-.2 1.6-1.5 2.9-3.1 3.4-.9.3-1.9.5-2.9.5-3.5 0-6.4-2.3-7.4-5.6-.3-1.1-.5-2.3-.5-3.5s.2-2.4.5-3.5C6.6 5.3 9.5 3 13 3c1.1 0 2.1.2 3.1.5 1.7.6 3 1.9 3.1 3.4h-2.9c-.2-.9-.8-1.6-1.7-2-1.1-.5-2.3-.7-3.4-.7-2.3 0-4.3 1.5-5 3.5-.2.6-.3 1.2-.3 1.9s.1 1.3.3 1.9c.8 2 2.7 3.5 5 3.5 1.1 0 2-.2 2.9-.6.9-.4 1.6-1.1 1.8-2z"/>
        </svg>
        Login with Google
      </button>

      <!-- Facebook Button -->
      <button class="flex items-center justify-center w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 ease-in-out transform hover:scale-105 focus:scale-105">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.505 1.492-3.89 3.776-3.89 1.095 0 2.245.195 2.245.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22.001c4.78-.75 8.437-4.888 8.437-9.879z"/>
        </svg>
        Login with Facebook
      </button>

      <!-- Twitter Button -->
      <button class="flex items-center justify-center w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 ease-in-out transform hover:scale-105 focus:scale-105">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M23.643 4.937c-.835.37-1.732.62-2.675.733 1.013-.6 1.793-1.553 2.153-2.67.952-.1 1.851-.244 2.728-.46-.928 1.23-2.2 2.122-3.652 2.614C16.683 3.914 15.022 3 13.104 3c-3.54 0-6.417 2.877-6.417 6.417 0 .505.057.995.167 1.47-.573-.028-1.134-.178-1.67-.442-1.827 2.942-4.597 4.916-7.742 5.553-.2.042-.395.072-.592.103.794 2.485 3.04 4.317 5.694 4.729C5.33 20.65 4.06 21 2.7 21c-.18 0-.356-.01-.53-.025 2.36 1.493 5.177 2.373 8.197 2.373 9.895 0 15.304-8.203 15.304-15.31 0-.234-.005-.468-.014-.7C22.056 6.61 22.963 5.834 23.643 4.937z"/>
        </svg>
        Login with Twitter
      </button>

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

Компонент гамбургер-меню

Адаптивный компонент меню гамбургера, разработанный в стиле брутализма с использованием Tailwind CSS, с поддержкой темного режима и заполнителями для изображений и аватаров.

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

                <div class="flex items-center justify-between p-5 bg-gray-800 text-white">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full mr-3">
        <span class="text-2xl font-bold">Brutalism Menu</span>
    </div>
    <div class="lg:hidden">
        <button id="menu-toggle" class="flex items-center justify-center h-10 w-10 rounded-md bg-gray-600 hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-200">
            <svg class="w-6 h-6 text-white" 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="M4 6h16M4 12h16m-7 6h7" /></svg>
        </button>
    </div>
    <div class="hidden lg:flex space-x-4">
        <a href="#" class="font-semibold hover:text-gray-400">Home</a>
        <a href="#" class="font-semibold hover:text-gray-400">About</a>
        <a href="#" class="font-semibold hover:text-gray-400">Services</a>
        <a href="#" class="font-semibold hover:text-gray-400">Contact</a>
    </div>
</div>

<div id="menu" class="lg:hidden bg-gray-900 text-white fixed top-0 left-0 w-full h-full z-50 hidden">
    <div class="flex flex-col items-center justify-center h-full space-y-4">
        <a href="#" class="text-lg font-bold hover:text-gray-400">Home</a>
        <a href="#" class="text-lg font-bold hover:text-gray-400">About</a>
        <a href="#" class="text-lg font-bold hover:text-gray-400">Services</a>
        <a href="#" class="text-lg font-bold hover:text-gray-400">Contact</a>
        <button class="mt-6 h-10 w-10 bg-red-600 hover:bg-red-500 rounded-full">
            <svg class="w-6 h-6 text-white" 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="M6 18L18 6M6 6l12 12" /></svg>
        </button>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-gray-800 { background-color: #1a1a1a; }
    .bg-gray-900 { background-color: #121212; }
}
</style>

Компонент "Колонны"

Компонент Columns в стиле Material Design с адаптивными эффектами и поддержкой темной темы с использованием Tailwind CSS.

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

                <div class="container mx-auto px-4 py-8">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Column 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Column 1</h2>
      <p class="text-gray-600 dark:text-gray-300">This is the content for column 1. It uses Material Design principles for styling and responsiveness.</p>
    </div>

    <!-- Column 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Column 2</h2>
      <p class="text-gray-600 dark:text-gray-300">This is the content for column 2. The columns are responsive, adapting to different screen sizes.</p>
    </div>

    <!-- Column 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Column 3</h2>
      <p class="text-gray-600 dark:text-gray-300">This is the content for column 3. Dark mode is supported, changing the background and text colors.</p>
    </div>
  </div>
</div>

Компонент отображения цен

Компонент отображения цен с эстетикой ретро/винтаж, адаптивным дизайном и поддержкой темного режима.

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

                <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="sm:flex sm:items-center px-6 py-4">
        <div class="text-center sm:text-left sm:flex-grow">
            <div class="mb-4">
                <p class="text-xl font-bold text-gray-900 dark:text-white">Product Name</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">Product Description</p>
            </div>
            <div class="flex justify-center sm:justify-start items-baseline">
                <span class="text-2xl font-bold text-gray-900 dark:text-white">$</span>
                <span class="text-4xl font-bold text-gray-900 dark:text-white">19.99</span>
                <span class="text-sm text-gray-600 dark:text-gray-400">/month</span>
            </div>
            <div class="mt-4">
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                    Buy Now
                </button>
            </div>
        </div>
    </div>
</div>

Загрузчик темного режима

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

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

                <div class="flex flex-col gap-4 w-full">
  <div class="flex items-center justify-between">
    <div>
      <div class="h-2 w-24 bg-gray-500 rounded"></div>
      <div class="h-2 w-16 bg-gray-500 mt-2 rounded"></div>
    </div>
    <div class="h-10 w-10 bg-gray-500 rounded-full"></div>
  </div>
  <div class="space-y-2">
    <div class="h-2 w-full bg-gray-500 rounded"></div>
    <div class="h-2 w-full bg-gray-500 rounded"></div>
    <div class="h-2 w-full bg-gray-500 rounded"></div>
    <div class="h-2 w-1/2 bg-gray-500 rounded"></div>
  </div>
</div>

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

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

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

                <div class="container mx-auto px-4 py-8">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Data Tables</h2>
    <div class="overflow-x-auto shadow-lg rounded-lg">
        <table class="min-w-full bg-white dark:bg-gray-800">
            <thead class="bg-gray-200 dark:bg-gray-700">
                <tr>
                    <th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">#</th>
                    <th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Name</th>
                    <th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Email</th>
                    <th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Avatar</th>
                </tr>
            </thead>
            <tbody>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
                    <td class="py-2 px-4 border-b dark:border-gray-600">1</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">John Doe</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">
                        <img src="https://i.pravatar.cc/150?img=1" alt="Avatar" class="rounded-full w-10 h-10" />
                    </td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
                    <td class="py-2 px-4 border-b dark:border-gray-600">2</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">Jane Smith</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">
                        <img src="https://i.pravatar.cc/150?img=2" alt="Avatar" class="rounded-full w-10 h-10" />
                    </td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
                    <td class="py-2 px-4 border-b dark:border-gray-600">3</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">Alice Johnson</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">
                        <img src="https://i.pravatar.cc/150?img=3" alt="Avatar" class="rounded-full w-10 h-10" />
                    </td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
                    <td class="py-2 px-4 border-b dark:border-gray-600">4</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">Bob Brown</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">
                        <img src="https://i.pravatar.cc/150?img=4" alt="Avatar" class="rounded-full w-10 h-10" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<style>
    /* Dark Mode Styles */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
            color: #cbd5e0;
        }
    }
</style>

1 ... 265 266 267 268 269 ... 315

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

Категории

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