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

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

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

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

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

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-3xl font-bold mb-4 text-gray-800 dark:text-white">Latest Articles</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 1</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=2" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 2</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=3" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 3</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=4" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 4</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=5" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 5</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=6" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 6</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
  </div>
</div>

Компоненты навигации

Адаптивная навигационная составляющая в соответствии с принципами Material Design с триадической цветовой схемой, ориентированная на интерфейсы социальных сетей, с поддержкой темного режима.

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

                <nav class="bg-gray-100 dark:bg-gray-800 shadow-lg p-4 rounded-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/40" alt="Logo" class="rounded-full">
            <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Social Media</h1>
        </div>
        <ul class="flex space-x-6">
            <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Home</a></li>
            <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Profile</a></li>
            <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Messages</a></li>
            <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Settings</a></li>
        </ul>
        <div class="relative">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="rounded-full w-8 h-8">
            <div class="absolute right-0 w-2 h-2 bg-green-500 rounded-full ring-2 ring-white dark:ring-gray-800"></div>
        </div>
    </div>
</nav>

<div class="container mx-auto mt-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Feed</h2>
    <div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/300/200" alt="Post Image" class="w-full h-40 object-cover rounded-lg">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a short description of the post content.</p>
        </div>
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/300/201" alt="Post Image" class="w-full h-40 object-cover rounded-lg">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a short description of the post content.</p>
        </div>
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/300/202" alt="Post Image" class="w-full h-40 object-cover rounded-lg">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a short description of the post content.</p>
        </div>
    </div>
</div>

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

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

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-6">
  <div class="bg-white dark:bg-gray-800 shadow-inner rounded-xl p-8 max-w-md w-full">
    <h2 class="text-gray-800 dark:text-white text-2xl font-semibold mb-6 text-center">Shopping Cart</h2>
    <div class="space-y-4">
      <div class="flex items-center justify-between bg-gray-200 dark:bg-gray-700 rounded-lg p-4">
        <img src="https://picsum.photos/60/60" alt="Product" class="rounded-md shadow-md">
        <div class="flex-1 ml-4">
          <h3 class="text-gray-800 dark:text-white font-medium">Product Title</h3>
          <p class="text-gray-600 dark:text-gray-400">$29.99</p>
        </div>
        <div class="flex items-center">
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">-</button>
          <span class="mx-2">1</span>
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">+</button>
        </div>
      </div>
      <div class="flex items-center justify-between bg-gray-200 dark:bg-gray-700 rounded-lg p-4">
        <img src="https://picsum.photos/60/60" alt="Product" class="rounded-md shadow-md">
        <div class="flex-1 ml-4">
          <h3 class="text-gray-800 dark:text-white font-medium">Another Product</h3>
          <p class="text-gray-600 dark:text-gray-400">$19.99</p>
        </div>
        <div class="flex items-center">
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">-</button>
          <span class="mx-2">2</span>
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">+</button>
        </div>
      </div>
    </div>
    <div class="mt-6 bg-gray-300 dark:bg-gray-600 rounded-lg p-4 flex justify-between items-center">
      <span class="text-gray-800 dark:text-white font-bold">Total:</span>
      <span class="text-lg text-gray-800 dark:text-white font-semibold">$69.97</span>
    </div>
    <div class="mt-4 flex justify-center">
      <button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow">
        Checkout
      </button>
    </div>
  </div>
</div>

Компонент навигации по цепочке навигации

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

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

                <nav class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
  <ol class="list-none flex space-x-4">
    <li class="text-gray-700 dark:text-gray-300">
      <a href="/" class="hover:text-blue-600 dark:hover:text-blue-300">Home</a>
    </li>
    <li class="text-gray-700 dark:text-gray-300">
      <span>/</span>
    </li>
    <li class="text-gray-700 dark:text-gray-300">
      <a href="/category" class="hover:text-blue-600 dark:hover:text-blue-300">Category</a>
    </li>
    <li class="text-gray-700 dark:text-gray-300">
      <span>/</span>
    </li>
    <li class="text-gray-700 dark:text-gray-300">
      <a href="/category/post" class="hover:text-blue-600 dark:hover:text-blue-300">Post Title</a>
    </li>
  </ol>
</nav>

<div class="mt-4 space-y-2">
  <div class="flex items-center space-x-2">
    <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar">
    <span class="text-gray-800 dark:text-gray-200">Author Name</span>
  </div>
  <p class="text-gray-600 dark:text-gray-400">
    This is a brief description meant for content consumption. It should be concise and engaging.
  </p>
</div>

<div class="flex items-center mt-4">
  <img class="h-32 w-full rounded-lg" src="https://picsum.photos/800/400" alt="Blog Post Image">
</div>

Макет портфолио

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

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

                <div class="flex flex-col min-h-screen bg-gradient-to-br from-purple-500 to-pink-500 dark:from-gray-800 dark:to-black">

  <!-- Header with microinteraction -->
  <header class="w-full px-4 py-3 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg flex justify-between items-center border-b border-white border-opacity-20 transition duration-300 ease-in-out transform hover:scale-105">
    <h1 class="text-xl font-bold text-white">My Portfolio</h1>
    <nav>
      <ul class="flex space-x-4">
        <li><a href="#" class="text-white hover:text-pink-200 transition duration-300 ease-in-out hover:underline">Home</a></li>
        <li><a href="#" class="text-white hover:text-pink-200 transition duration-300 ease-in-out hover:underline">Projects</a></li>
        <li><a href="#" class="text-white hover:text-pink-200 transition duration-300 ease-in-out hover:underline">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main content area -->
  <main class="flex-grow container mx-auto px-4 py-8 text-white">
    <section class="text-center mb-12">
      <h2 class="text-4xl font-semibold mb-4">Welcome to my portfolio</h2>
      <p class="text-lg">Showcasing my work with a touch of interaction.</p>
    </section>

    <!-- Example Project Card with microinteraction -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="bg-white bg-opacity-5 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-2">
        <h3 class="text-2xl font-bold mb-3">Project One</h3>
        <p class="text-white text-opacity-80 mb-4">A brief description of project one.</p>
        <img src="https://picsum.photos/seed/project1/400/300" alt="Project One" class="rounded-md mb-4">
        <a href="#" class="inline-block bg-white text-purple-700 font-semibold py-2 px-4 rounded hover:bg-purple-200 transition duration-300 ease-in-out">Learn More</a>
      </div>
      <!-- Repeat for more project cards -->
        <div class="bg-white bg-opacity-5 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-2">
        <h3 class="text-2xl font-bold mb-3">Project Two</h3>
        <p class="text-white text-opacity-80 mb-4">A brief description of project two.</p>
         <img src="https://picsum.photos/seed/project2/400/300" alt="Project Two" class="rounded-md mb-4">
        <a href="#" class="inline-block bg-white text-purple-700 font-semibold py-2 px-4 rounded hover:bg-purple-200 transition duration-300 ease-in-out">Learn More</a>
      </div>
        <div class="bg-white bg-opacity-5 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-2">
        <h3 class="text-2xl font-bold mb-3">Project Three</h3>
        <p class="text-white text-opacity-80 mb-4">A brief description of project three.</p>
         <img src="https://picsum.photos/seed/project3/400/300" alt="Project Three" class="rounded-md mb-4">
        <a href="#" class="inline-block bg-white text-purple-700 font-semibold py-2 px-4 rounded hover:bg-purple-200 transition duration-300 ease-in-out">Learn More</a>
      </div>
    </div>

  </main>

  <!-- Footer -->
  <footer class="w-full px-4 py-6 text-center text-white text-opacity-80">
    <p>&copy; 2023 My Portfolio</p>
  </footer>

</div>

Компонент всплывающих уведомлений

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

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

                <div class="fixed inset-0 flex items-end justify-center p-4 space-y-4 z-50">
    <!-- Toast Notification -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg border border-gray-200 dark:border-gray-700 overflow-hidden w-full max-w-sm">
        <div class="flex items-center p-4">
            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="font-semibold text-vibrant-500 dark:text-vibrant-300">John Doe</p>
                <p class="text-gray-700 dark:text-gray-300">Your order has been shipped!</p>
            </div>
            <button class="text-gray-500 dark:text-gray-400 hover:text-vibrant-500 dark:hover:text-vibrant-300">
                &times;
            </button>
        </div>
        <div class="p-4 border-t border-gray-200 dark:border-gray-700">
            <img src="https://picsum.photos/400/200?random=1" alt="Product Image" class="w-full rounded-lg mb-2">
            <p class="font-semibold text-gray-800 dark:text-gray-200">Product Name</p>
            <p class="text-gray-600 dark:text-gray-400">Price: $29.99</p>
            <button class="mt-2 w-full bg-vibrant-500 dark:bg-vibrant-400 text-white font-semibold hover:bg-vibrant-600 dark:hover:bg-vibrant-300 rounded-lg py-2">
                View Order
            </button>
        </div>
    </div>
</div>

<!-- Toast Notification (Alternate) -->
<div class="fixed inset-0 flex items-end justify-center p-4 space-y-4 z-50">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg border border-gray-200 dark:border-gray-700 overflow-hidden w-full max-w-sm">
        <div class="flex items-center p-4">
            <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="font-semibold text-vibrant-500 dark:text-vibrant-300">Jane Smith</p>
                <p class="text-gray-700 dark:text-gray-300">You have a new message!</p>
            </div>
            <button class="text-gray-500 dark:text-gray-400 hover:text-vibrant-500 dark:hover:text-vibrant-300">
                &times;
            </button>
        </div>
        <div class="p-4 border-t border-gray-200 dark:border-gray-700">
            <p class="font-semibold text-gray-800 dark:text-gray-200">Check your inbox for more details.</p>
            <button class="mt-2 w-full bg-vibrant-500 dark:bg-vibrant-400 text-white font-semibold hover:bg-vibrant-600 dark:hover:bg-vibrant-300 rounded-lg py-2">
                View Messages
            </button>
        </div>
    </div>
</div>

Компонент Галерея товаров

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

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

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">  <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Product Gallery</h2>  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">    <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105">      <img src="https://picsum.photos/id/1012/300/200" alt="Product 1" class="rounded-lg mb-2">      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 1</h3>      <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p>      <div class="flex items-center mt-2">        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">        <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span>      </div>    </div>    <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105">      <img src="https://picsum.photos/id/1013/300/200" alt="Product 2" class="rounded-lg mb-2">      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 2</h3>      <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p>      <div class="flex items-center mt-2">        <img src="https://randomuser.me/api/portraits/women/31.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">        <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span>      </div>    </div>    <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105">      <img src="https://picsum.photos/id/1014/300/200" alt="Product 3" class="rounded-lg mb-2">      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 3</h3>      <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p>      <div class="flex items-center mt-2">        <img src="https://randomuser.me/api/portraits/men/31.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">        <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span>      </div>    </div>    <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105">      <img src="https://picsum.photos/id/1015/300/200" alt="Product 4" class="rounded-lg mb-2">      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 4</h3>      <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p>      <div class="flex items-center mt-2">        <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">        <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span>      </div>    </div>  </div></div>

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

Простой компонент окна чата, выполненный в стиле Material Design с темной темой и адаптивным макетом, подходящим для интерфейсов социальных сетей.

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

                <div class="h-screen bg-gray-100 dark:bg-gray-800 flex flex-col justify-end">
    <div class="max-w-md w-full bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4">
        <div class="flex flex-col space-y-4 overflow-y-scroll h-80">
            <div class="flex items-start space-x-2">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                <div class="bg-blue-500 text-white p-2 rounded-lg rounded-bl-none">
                    Hello, how are you?
                </div>
            </div>
            <div class="flex items-start space-x-2">
                <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                <div class="bg-gray-300 text-gray-800 p-2 rounded-lg rounded-br-none">
                    I'm good, thanks! How about you?
                </div>
            </div>
            <div class="flex items-start space-x-2">
                <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                <div class="bg-blue-500 text-white p-2 rounded-lg rounded-bl-none">
                    I'm doing well! Ready for the weekend?
                </div>
            </div>
        </div>
        <div class="mt-4 flex">
            <input type="text" placeholder="Type your message..." class="flex-1 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg p-2 focus:outline-none focus:ring focus:ring-blue-500">
            <button class="bg-blue-500 text-white p-2 rounded-lg ml-2 focus:outline-none">Send</button>
        </div>
    </div>
</div>

Брутализм Навигация по боковой панели

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

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

                <div class="flex h-screen bg-stone-100 dark:bg-stone-900">
  <!-- Sidebar -->
  <div class="w-64 bg-stone-300 dark:bg-stone-800 p-6 space-y-6 transform -translate-x-full md:translate-x-0 transition-transform duration-200 ease-in-out">
    <div class="flex items-center justify-between">
      <h2 class="text-2xl font-bold text-stone-800 dark:text-stone-200">Navigation</h2>
      <!-- Mobile toggle (hidden on md and up) -->
      <button class="text-stone-800 dark:text-stone-200 md:hidden">
        <svg class="w-6 h-6" 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 12h16M4 18h16"></path></svg>
      </button>
    </div>
    <nav class="text-stone-700 dark:text-stone-300">
      <ul class="space-y-4">
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Home</a></li>
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Articles</a></li>
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Categories</a></li>
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">About</a></li>
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Contact</a></li>
      </ul>
    </nav>
  </div>
  
  <!-- Content area -->
  <div class="flex-1 p-10 overflow-y-auto">
    <h1 class="text-3xl font-bold text-stone-800 dark:text-stone-200 mb-6">Main Content Area</h1>
    <p class="text-stone-700 dark:text-stone-300">
      This is the main content area. The sidebar is on the left.
    </p>
    <!-- Example content -->
    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-stone-200 dark:bg-stone-700 p-6 rounded">
        <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-4">Article Title 1</h3>
        <img src="https://picsum.photos/seed/article1/400/200" alt="Article image" class="w-full h-48 object-cover mb-4">
        <p class="text-stone-700 dark:text-stone-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
       <div class="bg-stone-200 dark:bg-stone-700 p-6 rounded">
        <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-4">Article Title 2</h3>
         <img src="https://picsum.photos/seed/article2/400/200" alt="Article image" class="w-full h-48 object-cover mb-4">
        <p class="text-stone-700 dark:text-stone-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>
</div>

Неморфный компонент-контейнер

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

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

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
    <div class="bg-gray-300 dark:bg-gray-900 shadow-neumorphic rounded-lg p-6 w-full max-w-md">
        <div class="flex flex-col items-center justify-center mb-4">
            <img src="https://picsum.photos/200/150" alt="Portfolio Item" class="rounded-lg mb-2 shadow-neumorphic">
            <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Portfolio Item Title</h2>
            <p class="text-gray-600 dark:text-gray-400">A brief description of the portfolio item goes here. It showcases the work done and highlights key features.</p>
        </div>
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-neumorphic">
            <span class="ml-2 text-gray-800 dark:text-gray-200">John Doe</span>
        </div>
        <div class="mt-4">
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline transition ease-in-out duration-200">View Details</a>
        </div>
    </div>
</div>

<style>
    .shadow-neumorphic {
        box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.3),
                    -8px -8px 15px rgba(255, 255, 255, 0.5);
    }
</style>

1 ... 126 127 128 129 130 ... 242

Категории

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

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

Компоненты навигации

Компонент корзины покупок

Компонент навигации по цепочке навигации

Макет портфолио

Компонент всплывающих уведомлений

Компонент Галерея товаров

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

Брутализм Навигация по боковой панели

Неморфный компонент-контейнер