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

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

Компоненты улучшения навигации

Компонент адаптивной навигации, разработанный с учетом концепций Material Design с использованием Tailwind CSS, с поддержкой темных тем и изображениями-заполнителями.

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

                <nav class="bg-white dark:bg-gray-800 shadow-lg">
    <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
        <div class="relative flex items-center justify-between h-16">
            <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
                <!-- Mobile menu button -->
                <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
                    <span class="sr-only">Open main menu</span>
                    <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                    </svg>
                    <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
                <div class="flex-shrink-0">
                    <img class="h-8 w-8" src="https://picsum.photos/40/40" alt="Logo" />
                </div>
                <div class="hidden sm:block sm:ml-6">
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
                        <a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
                        <a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Services</a>
                        <a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="sm:hidden" id="mobile-menu">
        <div class="px-2 pt-2 pb-3 space-y-1">
            <a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
            <a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">About</a>
            <a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Services</a>
            <a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a>
        </div>
    </div>
</nav>

<section class="bg-gray-50 dark:bg-gray-900">
    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-semibold text-gray-900 dark:text-white">Welcome to Our Website</h1>
        <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
                <img class="rounded-md" src="https://picsum.photos/500/300" alt="Placeholder Image" />
                <h2 class="mt-2 text-lg font-medium text-gray-900 dark:text-white">Section 1</h2>
                <p class="text-gray-600 dark:text-gray-300">This is a description for section 1.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
                <img class="rounded-md" src="https://picsum.photos/500/301" alt="Placeholder Image" />
                <h2 class="mt-2 text-lg font-medium text-gray-900 dark:text-white">Section 2</h2>
                <p class="text-gray-600 dark:text-gray-300">This is a description for section 2.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
                <img class="rounded-md" src="https://picsum.photos/500/302" alt="Placeholder Image" />
                <h2 class="mt-2 text-lg font-medium text-gray-900 dark:text-white">Section 3</h2>
                <p class="text-gray-600 dark:text-gray-300">This is a description for section 3.</p>
            </div>
        </div>
    </div>
</section>

Компонент тепловых карт

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

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

                <div class="bg-gray-900 text-white p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold mb-4">Heat Maps</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <div class="bg-gray-800 rounded-lg p-4 transition-transform hover:scale-105">
            <img class="rounded-md" src="https://picsum.photos/200?random=1" alt="Heat Map 1">
            <p class="mt-2">Heat Map 1</p>
            <p class="text-sm text-gray-400">Description of heat map 1.</p>
        </div>
        <div class="bg-gray-800 rounded-lg p-4 transition-transform hover:scale-105">
            <img class="rounded-md" src="https://picsum.photos/200?random=2" alt="Heat Map 2">
            <p class="mt-2">Heat Map 2</p>
            <p class="text-sm text-gray-400">Description of heat map 2.</p>
        </div>
        <div class="bg-gray-800 rounded-lg p-4 transition-transform hover:scale-105">
            <img class="rounded-md" src="https://picsum.photos/200?random=3" alt="Heat Map 3">
            <p class="mt-2">Heat Map 3</p>
            <p class="text-sm text-gray-400">Description of heat map 3.</p>
        </div>
        <div class="bg-gray-800 rounded-lg p-4 transition-transform hover:scale-105">
            <img class="rounded-md" src="https://picsum.photos/200?random=4" alt="Heat Map 4">
            <p class="mt-2">Heat Map 4</p>
            <p class="text-sm text-gray-400">Description of heat map 4.</p>
        </div>
    </div>
    <h3 class="mt-8 text-xl font-semibold">User Insights</h3>
    <div class="mt-4 flex flex-wrap gap-4">
        <div class="bg-gray-800 rounded-lg p-4 flex items-center">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1">
            <div class="ml-3">
                <p class="font-medium">User 1</p>
                <p class="text-sm text-gray-400">Active in heat map 1.</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg p-4 flex items-center">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2">
            <div class="ml-3">
                <p class="font-medium">User 2</p>
                <p class="text-sm text-gray-400">Active in heat map 2.</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg p-4 flex items-center">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3">
            <div class="ml-3">
                <p class="font-medium">User 3</p>
                <p class="text-sm text-gray-400">Active in heat map 3.</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg p-4 flex items-center">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User 4">
            <div class="ml-3">
                <p class="font-medium">User 4</p>
                <p class="text-sm text-gray-400">Active in heat map 4.</p>
            </div>
        </div>
    </div>
</div>

Компонент сравнения продуктов

Адаптивный компонент сравнения товаров, стилизованный под Material Design с использованием Tailwind CSS, с макетами на основе сетки, тенями и поддержкой темных тем.

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

                <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-4xl mx-auto">
    <h2 class="text-2xl font-semibold mb-4 text-gray-800 dark:text-gray-200 text-center">Product Comparison</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
            <img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/400/250?random=1" alt="Product 1" />
            <h3 class="text-xl font-medium mt-2 text-gray-800 dark:text-gray-200">Product 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of Product 1 goes here.</p>
            <div class="flex items-center mt-2">
                <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                <span class="ml-2 text-gray-700 dark:text-gray-300">User Name</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
            <img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/400/250?random=2" alt="Product 2" />
            <h3 class="text-xl font-medium mt-2 text-gray-800 dark:text-gray-200">Product 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of Product 2 goes here.</p>
            <div class="flex items-center mt-2">
                <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
                <span class="ml-2 text-gray-700 dark:text-gray-300">User Name</span>
            </div>
        </div>
    </div>
</div>

Компонент кнопок "Поделиться" в социальных сетях

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

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

                <div class="flex justify-center items-center space-x-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
        <img src="https://picsum.photos/20/20?random=1" alt="Share on Facebook" class="w-5 h-5 rounded-full">
        <span>Facebook</span>
    </a>
    <a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
        <img src="https://picsum.photos/20/20?random=2" alt="Share on Twitter" class="w-5 h-5 rounded-full">
        <span>Twitter</span>
    </a>
    <a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
        <img src="https://picsum.photos/20/20?random=3" alt="Share on LinkedIn" class="w-5 h-5 rounded-full">
        <span>LinkedIn</span>
    </a>
    <a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
        <img src="https://picsum.photos/20/20?random=4" alt="Share on WhatsApp" class="w-5 h-5 rounded-full">
        <span>WhatsApp</span>
    </a>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .dark\:bg-gray-800 {
        background-color: #2d3748;
    }
    .dark\:text-white {
        color: #fff;
    }
    .dark\:hover\:bg-gray-700 {
        background-color: #4a5568;
    }
}
</style>

Компонент Media Embed

Встраиваемый компонент в стиле ретро/винтаж, созданный с ностальгией по 80-м и 90-м годам. Он отличается адаптивным стилем и поддержкой темного режима с помощью Tailwind CSS.

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

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="relative">
        <img class="w-full" src="https://picsum.photos/600/400?random=1" alt="Media Thumbnail" />
        <div class="absolute top-0 left-0 right-0 bottom-0 bg-black opacity-25"></div>
        <div class="absolute top-2 right-2 bg-white dark:bg-gray-900 text-gray-800 dark:text-white rounded-full p-2 shadow flex items-center">
            <img class="rounded-full w-8 h-8 border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
        </div>
    </div>
    <div class="p-4">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white">Vintage Media Title</h2>
        <p class="mt-2 text-gray-600 dark:text-gray-300">This is a description of the media embed component. It encompasses a retro aesthetic reminiscent of the 80s and 90s, adorned with bright colors and distinctive patterns.</p>
        <div class="mt-4 flex justify-between items-center">
            <span class="text-sm text-gray-500 dark:text-gray-400">Posted on 01 Jan 1990</span>
            <a href="#" class="bg-pink-500 text-white px-3 py-1 rounded-full hover:bg-pink-600 transition">Watch Now</a>
        </div>
    </div>
</div>
<style>
  @media (prefers-color-scheme: dark) {
    .dark\:bg-gray-800 {
      background-color: #2d3748;
    }
    .dark\:text-white {
      color: #fff;
    }
    .dark\:text-gray-300 {
      color: #e2e8f0;
    }
    .dark\:text-gray-400 {
      color: #cbd5e0;
    }
    .dark\:bg-gray-900 {
      background-color: #1a202c;
    }
    .dark\:border-gray-600 {
      border-color: #4a5568;
    }
  }
</style>

Компонент навигации на боковой панели

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

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

                <div class="flex">
  <aside class="bg-gray-900 text-white w-64 h-screen shadow-lg rounded-r-3xl p-5">
    <div class="flex flex-col items-center mb-10">
      <img class="rounded-full border-4 border-gray-700" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" width="100" height="100" />
      <h2 class="mt-3 text-xl font-bold">John Doe</h2>
      <p class="text-gray-400">Web Developer</p>
    </div>
    <nav>
      <ul class="space-y-4">
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=1" alt="Icon" />
            Dashboard
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=2" alt="Icon" />
            Profile
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=3" alt="Icon" />
            Settings
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=4" alt="Icon" />
            Help
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=5" alt="Icon" />
            Logout
          </a>
        </li>
      </ul>
    </nav>
  </aside>
  <main class="flex-1 p-10 bg-gray-200">
    <h1 class="text-3xl font-bold">Main Content Area</h1>
    <p>This is where your main content goes.</p>
  </main>
</div>

Компонент рейтинговой системы

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

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

                <div class="max-w-sm mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Rate Us!</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4">Your feedback is valuable to us!</p>
    <div class="flex items-center justify-center mb-4">
        <img src="https://picsum.photos/100/100" alt="Random User" class="rounded-full border-2 border-gray-800 dark:border-white">
        <span class="ml-3 text-lg text-gray-800 dark:text-white">User Name</span>
    </div>
    <div class="flex justify-center">
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
    </div>
    <div class="mt-4">
        <button class="w-full bg-gray-800 dark:bg-yellow-400 text-white py-2 rounded-md font-bold hover:bg-yellow-500 transition duration-200">Submit Rating</button>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        .dark:hover\:bg-yellow-500:hover {
            background-color: #bb8d29;
        }
    }
</style>

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

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

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

                <header class="bg-gray-900 text-white p-6">
    <div class="flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50" alt="Logo" class="w-16 h-16 rounded-full border-4 border-yellow-500">
            <h1 class="text-3xl font-bold">Brutalist Header</h1>
        </div>
        <nav class="flex space-x-6">
            <a href="#" class="text-yellow-300 hover:underline">Home</a>
            <a href="#" class="text-yellow-300 hover:underline">About</a>
            <a href="#" class="text-yellow-300 hover:underline">Services</a>
            <a href="#" class="text-yellow-300 hover:underline">Contact</a>
        </nav>
    </div>
    <div class="mt-4 pt-4 border-t border-yellow-500 flex flex-col space-y-2">
        <h2 class="text-xl font-bold">Welcome to the Brutalist World</h2>
        <p class="text-sm">This is a header component that embodies the raw and bold aesthetics of Brutalism.</p>
    </div>
</header>

<style>
    @media (prefers-color-scheme: dark) {
        header {
            background-color: #1c1917;
            color: #f9fafb;
        }
        a {
            color: #fbbf24;
        }
    }
</style>

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

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

                <nav class="bg-white dark:bg-gray-800 shadow-md p-4 rounded-md flex justify-between items-center transition-all duration-300">
    <div class="flex items-center space-x-4">
        <img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full transition-transform transform hover:scale-110 duration-300">
        <h1 class="text-lg font-semibold text-gray-800 dark:text-gray-200">My Website</h1>
    </div>
    <div class="flex space-x-4">
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Home</a>
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">About</a>
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Services</a>
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Contact</a>
    </div>
</nav>

Компонент видеоплеера

Компонент видеоплеера в стиле Brutalism с высокой контрастностью и необычной версткой, отличающийся адаптивным дизайном и поддержкой темных тем с использованием Tailwind CSS.

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

                <div class="flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
    <div class="relative w-full max-w-2xl rounded-lg overflow-hidden shadow-lg">
        <video class="w-full h-auto" controls>
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="absolute inset-0 bg-black opacity-50"></div>
    </div>
    <div class="mt-4 text-center text-lg font-bold text-gray-800 dark:text-white">Bold Video Title</div>
    <div class="mt-2 text-center text-gray-600 dark:text-gray-300">An engaging video description goes here.</div>
    <div class="mt-4 flex items-center justify-center space-x-4">
        <img src="https://picsum.photos/50/50" alt="User Avatar" class="rounded-full border-2 border-gray-800 dark:border-white">
        <p class="text-sm font-semibold text-gray-800 dark:text-white">User Name</p>
    </div>
    <div class="mt-4 flex justify-between w-full max-w-md">
        <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Like</button>
        <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Dislike</button>
    </div>
</div>

1 ... 226 227 228 229 230 ... 242

Категории

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