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

Категории

Компоненты Функциональные компоненты

Функциональные компоненты

Компоненты, обеспечивающие определенный функционал веб-сайта

Компонент Функциональные компоненты

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

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

                <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Functional Components Dashboard</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    /* Analogous Colors (example: blue-green, blue, blue-violet) */
    /* Using shades of Tailwind's built-in colors for simplicity */
    .bg-primary {
      background-color: #437c90; /* A blue-green */
    }
    .text-primary {
      color: #437c90;
    }
    .bg-secondary {
      background-color: #325a6c; /* A bluer tone */
    }
     .text-secondary {
      color: #325a6c;
    }
    .bg-tertiary {
      background-color: #5a6c8c; /* A blue-violet */
    }
     .text-tertiary {
      color: #5a6c8c;
    }

    /* Dark Mode Styles */
    .dark .bg-primary {
      background-color: #1e3a48;
    }
    .dark .text-primary {
      color: #1e3a48;
    }
     .dark .bg-secondary {
      background-color: #152c3a;
    }
     .dark .text-secondary {
      color: #152c3a;
    }
     .dark .bg-tertiary {
      background-color: #2c3a4e;
    }
     .dark .text-tertiary {
      color: #2c3a4e;
    }

    /* Material Design Shadows (using Tailwind's built-in shadows) */
    .shadow-material {
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    }
    .dark .shadow-material {
       box-shadow: 0 3px 1px -2px rgba(255, 255, 255, 0.2), 0 2px 2px 0 rgba(255, 255, 255, 0.14), 0 1px 5px 0 rgba(255, 255, 255, 0.12);
    }

  </style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4">

  <div class="container mx-auto">

    <!-- Header -->
    <header class="flex justify-between items-center mb-8">
      <h1 class="text-2xl font-bold">Dashboard</h1>
      <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
        <!-- Dark mode toggle - functional implementation would require JS -->
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
        </svg>
      </button>
    </header>

    <!-- Functional Components Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Component 1: Stats Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-primary mb-2">Total Users</h2>
        <p class="text-3xl font-bold">1,234</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">+10% from last month</p>
      </div>

      <!-- Component 2: Recent Activity Feed -->
      <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-secondary mb-4">Recent Activity</h2>
        <ul>
          <li class="flex items-center mb-3">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
            <div>
              <p class="text-sm font-semibold">John Doe</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Added new report</p>
            </div>
          </li>
           <li class="flex items-center mb-3">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
            <div>
              <p class="text-sm font-semibold">Jane Smith</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Updated user profile</p>
            </div>
          </li>
           <li class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
            <div>
              <p class="text-sm font-semibold">Peter Jones</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Generated weekly summary</p>
            </div>
          </li>
        </ul>
      </div>

      <!-- Component 3: Quick Links -->
      <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-tertiary mb-4">Quick Links</h2>
        <div class="grid grid-cols-2 gap-4">
          <a href="#" class="block bg-gray-200 dark:bg-gray-700 text-center py-3 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">Settings</a>
          <a href="#" class="block bg-gray-200 dark:bg-gray-700 text-center py-3 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">Reports</a>
          <a href="#" class="block bg-gray-200 dark:bg-gray-700 text-center py-3 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">Analytics</a>
          <a href="#" class="block bg-gray-200 dark:bg-gray-700 text-center py-3 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">Users</a>
        </div>
      </div>

      <!-- Component 4: Image Card (example) -->
       <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-primary mb-4">Data Visualization (Placeholder)</h2>
        <img src="https://picsum.photos/seed/dashboard/400/200" alt="Placeholder Image" class="rounded-md w-full">
      </div>

       <!-- Component 5: Another Stats Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-secondary mb-2">Revenue</h2>
        <p class="text-3xl font-bold">$56,789</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">-5% from last quarter</p>
      </div>

       <!-- Component 6: Text Block (example) -->
       <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-tertiary mb-4">Notes</h2>
        <p class="text-sm text-gray-700 dark:text-gray-300">This is a placeholder for important notes or messages for the user.</p>
      </div>

    </div>

  </div>

  <!-- Basic Dark Mode Toggle Script (for demonstration, not a full implementation) -->
  <script>
    const toggleButton = document.querySelector('header button');
    const html = document.querySelector('html');

    toggleButton.addEventListener('click', () => {
      html.classList.toggle('dark');
    });
  </script>

</body>
</html>

Компонент Функциональные компоненты

Функциональная составляющая для E-commerce с адаптивным дизайном и поддержкой темных тем.

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

                <div class="bg-gray-100 dark:bg-gray-800 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 px-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden">
          <div class="md:flex">
            <div class="md:flex-shrink-0">
              <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
            </div>
            <div class="p-8">
              <div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-400 font-semibold">Category</div>
              <a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline">Product Title</a>
              <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ante justo. Integer eu eleifend erat.</p>
              <div class="mt-4 flex items-center">
                <div class="text-lg font-bold text-gray-900 dark:text-white">$19.99</div>
                <button class="ml-auto bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden">
          <div class="md:flex">
            <div class="md:flex-shrink-0">
              <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
            </div>
            <div class="p-8">
              <div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-400 font-semibold">Category</div>
              <a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline">Product Title</a>
              <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ante justo. Integer eu eleifend erat.</p>
              <div class="mt-4 flex items-center">
                <div class="text-lg font-bold text-gray-900 dark:text-white">$19.99</div>
                <button class="ml-auto bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Компонент Функциональные компоненты

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

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

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transition duration-300 ease-in-out">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">My Portfolio</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=1" alt="Portfolio Item 1" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 1</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 1.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=2" alt="Portfolio Item 2" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 2</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 2.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=3" alt="Portfolio Item 3" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 3</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 3.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=4" alt="Portfolio Item 4" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 4</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 4.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=5" alt="Portfolio Item 5" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 5</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 5.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=6" alt="Portfolio Item 6" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 6</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 6.</p>
        </div>
    </div>
    <div class="mt-6">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">About Me</h2>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <p class="text-gray-600 dark:text-gray-400">Hello! I'm a passionate developer who loves to create. Check out my work above and connect with me for collaboration!</p>
        </div>
    </div>
</div>

Функциональная составляющая электронной коммерции

Минималистичный компонент электронной коммерции Flat Design с триадической цветовой гаммой и адаптивной поддержкой темного режима.

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

                <div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Welcome to Our E-commerce Store</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title</h2>
                <p class="text-gray-600 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
                <div class="mt-4">
                    <span class="text-xl font-bold text-gray-800 dark:text-white">$99.99</span>
                    <button class="mt-2 bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 transition duration-200">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/301/200" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Another Product</h2>
                <p class="text-gray-600 dark:text-gray-300 mt-2">Find out more about this amazing product!</p>
                <div class="mt-4">
                    <span class="text-xl font-bold text-gray-800 dark:text-white">$149.99</span>
                    <button class="mt-2 bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 transition duration-200">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/302/200" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Best Seller</h2>
                <p class="text-gray-600 dark:text-gray-300 mt-2">This product is a customer favorite!</p>
                <div class="mt-4">
                    <span class="text-xl font-bold text-gray-800 dark:text-white">$79.99</span>
                    <button class="mt-2 bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 transition duration-200">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-8">
        <h3 class="text-xl font-bold text-gray-800 dark:text-white">Customer Reviews</h3>
        <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">
            <div class="ml-4">
                <p class="text-gray-800 dark:text-white">John Doe</p>
                <p class="text-gray-600 dark:text-gray-300">"Excellent products! Fast shipping and great service. Highly recommend!"</p>
            </div>
        </div>
    </div>
</div>

Компонент Функциональные компоненты - Пользовательский интерфейс темного режима

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

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

                <div class="bg-gray-800 text-white p-4 rounded-lg shadow-md max-w-lg mx-auto dark:bg-gray-900">
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="ml-3">
            <h2 class="text-lg font-semibold">John Doe</h2>
            <p class="text-gray-400">@john_doe</p>
        </div>
    </div>
    <div class="mb-4">
        <p class="text-gray-300">Just had a great day exploring the mountains! 🌄</p>
        <img class="mt-2 rounded-lg" src="https://picsum.photos/600/300?random=1" alt="Nature Image">
    </div>
    <div class="flex justify-between text-gray-400">
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Like</span>
        </button>
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Comment</span>
        </button>
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Share</span>
        </button>
    </div>
</div>

Функциональная составляющая блога

Функциональные компоненты Компонент с 3D дизайном, Комплементарная цветовая гамма, умеренная сложность для блогов, адаптивный с поддержкой темных тем. Никакого JS, только HTML и Tailwind.

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

                <div class="bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
        <div class="text-center">
            <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl">
                From the Blog
            </h2>
            <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 dark:text-gray-400 sm:mt-4">
                Explore our latest articles and insights.
            </p>
        </div>

        <div class="mt-12 grid gap-5 lg:grid-cols-3 lg:max-w-none">
            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
                <div class="flex-shrink-0">
                    <img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog1/400/300" alt="">
                </div>
                <div class="flex-1 p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
                            <a href="#" class="hover:underline">
                                Article
                            </a>
                        </p>
                        <a href="#" class="block mt-2">
                            <p class="text-xl font-semibold text-gray-900 dark:text-white">
                                Boost your conversion rate
                            </p>
                            <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
                            </p>
                        </a>
                    </div>
                    <div class="mt-6 flex items-center">
                        <div class="flex-shrink-0">
                            <a href="#">
                                <span class="sr-only">Roel Aufderhar</span>
                                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                            </a>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                <a href="#" class="hover:underline">
                                    Roel Aufderhar
                                </a>
                            </p>
                            <div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
                                <time datetime="2020-03-16">Mar 16, 2020</time>
                                <span aria-hidden="true">
                                    &middot;
                                </span>
                                <span>
                                    6 min read
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
                <div class="flex-shrink-0">
                    <img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog2/400/300" alt="">
                </div>
                <div class="flex-1 p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
                            <a href="#" class="hover:underline">
                                Video
                            </a>
                        </p>
                        <a href="#" class="block mt-2">
                            <p class="text-xl font-semibold text-gray-900 dark:text-white">
                                How to use search engine optimization to drive traffic to your site
                            </p>
                            <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
                            </p>
                        </a>
                    </div>
                    <div class="mt-6 flex items-center">
                        <div class="flex-shrink-0">
                            <a href="#">
                                <span class="sr-only">Brenna Goyette</span>
                                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
                            </a>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                <a href="#" class="hover:underline">
                                    Brenna Goyette
                                </a>
                            </p>
                            <div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
                                <time datetime="2020-03-16">Mar 16, 2020</time>
                                <span aria-hidden="true">
                                    &middot;
                                </span>
                                <span>
                                    6 min read
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
                <div class="flex-shrink-0">
                    <img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog3/400/300" alt="">
                </div>
                <div class="flex-1 p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
                            <a href="#" class="hover:underline">
                                Case Study
                            </a>
                        </p>
                        <a href="#" class="block mt-2">
                            <p class="text-xl font-semibold text-gray-900 dark:text-white">
                                Improve your customer experience
                            </p>
                            <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
                            </p>
                        </a>
                    </div>
                    <div class="mt-6 flex items-center">
                        <div class="flex-shrink-0">
                            <a href="#">
                                <span class="sr-only">Daniela Metz</span>
                                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/56.jpg" alt="">
                            </a>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                <a href="#" class="hover:underline">
                                    Daniela Metz
                                </a>
                            </p>
                            <div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
                                <time datetime="2020-03-16">Mar 16, 2020</time>
                                <span aria-hidden="true">
                                    &middot;
                                </span>
                                <span>
                                    6 min read
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Компонент Функциональные компоненты

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

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

                <div class="max-w-3xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700">
    <header class="flex items-center space-x-4 border-b border-gray-300 dark:border-gray-700 pb-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full">
        <div>
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
        </div>
    </header>
    <div class="my-4">
        <p class="text-gray-800 dark:text-gray-200">
            This is a sample post showcasing Brutalism in design. 
            The layout is raw and bold, inviting interactions with its visually striking style!
        </p>
        <img src="https://picsum.photos/800/400?random=1" alt="Random Image" class="mt-4 w-full rounded-lg shadow-md">
    </div>
    <footer class="flex justify-between border-t border-gray-300 dark:border-gray-700 pt-4 mt-4">
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none">❤️ Like</button>
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none">💬 Comment</button>
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none">🔗 Share</button>
    </footer>
</div>

Компонент Функциональные компоненты

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

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

                <div class="p-6 max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md">
  <div class="flex items-center space-x-4">
    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <div>
      <h2 class="text-xl font-bold text-gray-800 dark:text-white">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-400">Business Analyst</p>
    </div>
  </div>
  <div class="mt-4">
    <p class="text-gray-700 dark:text-gray-300">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
    </p>
  </div>
  <div class="mt-4">
    <img class="w-full h-32 rounded-lg" src="https://picsum.photos/400/200" alt="Business Image">
  </div>
  <div class="mt-4">
    <a href="#" class="inline-block px-6 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Contact</a>
  </div>
</div>

Компонент Функциональные компоненты

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

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

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
  <div class="p-4">
    <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Blog Post Title</h2>
    <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pretium massa.</p>
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-3" />
      <div class="text-sm">
        <p class="text-gray-800 dark:text-white">Author Name</p>
        <p class="text-gray-500 dark:text-gray-400">Feb 16, 2023</p>
      </div>
    </div>
  </div>
  <img src="https://picsum.photos/400/200" alt="Blog Post Image" class="w-full h-48 object-cover bg-gray-200 dark:bg-gray-700 transition-all duration-300 transform hover:scale-105" />
  <div class="p-4 bg-gray-100 dark:bg-gray-700">
    <button class="px-4 py-2 bg-gray-800 text-white font-semibold rounded-lg hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-200 transition duration-150 ease-in-out">Read More</button>
  </div>
</div>

Функциональная составляющая нейроморфизма

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

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

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-6">
  <div class="w-full max-w-sm bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic dark:shadow-neumorphic-dark">
    <div class="flex flex-col items-center">
      <img src="https://randomuser.me/api/portraits/women/81.jpg" alt="Avatar" class="w-24 h-24 rounded-full shadow-neumorphic-inset dark:shadow-neumorphic-dark-inset mb-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Jane Doe</h2>
      <p class="text-gray-600 dark:text-gray-300 text-center mb-6">Frontend Developer | Neumorphism Enthusiast</p>
      <div class="flex justify-around w-full">
        <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-800 shadow-neumorphic dark:shadow-neumorphic-dark text-gray-600 dark:text-gray-300 hover:shadow-neumorphic-press dark:hover:shadow-neumorphic-dark-press transition duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
          </svg>
        </button>
        <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-800 shadow-neumorphic dark:shadow-neumorphic-dark text-gray-600 dark:text-gray-300 hover:shadow-neumorphic-press dark:hover:shadow-neumorphic-dark-press transition duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
          </svg>
        </button>
        <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-800 shadow-neumorphic dark:shadow-neumorphic-dark text-gray-600 dark:text-gray-300 hover:shadow-neumorphic-press dark:hover:shadow-neumorphic-dark-press transition duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0l-6 6"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

<style>
  .shadow-neumorphic {
    box-shadow: 7px 7px 15px #a7a7a7,
               -7px -7px 15px #ffffff;
  }
  .shadow-neumorphic-inset {
    box-shadow: inset 7px 7px 15px #a7a7a7,
                inset -7px -7px 15px #ffffff;
  }
  .shadow-neumorphic-press {
    box-shadow: inset 5px 5px 10px #a7a7a7,
                inset -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #4b5563,
               -7px -7px 15px #374151;
  }
  .dark .shadow-neumorphic-dark-inset {
    box-shadow: inset 7px 7px 15px #4b5563,
                inset -7px -7px 15px #374151;
  }
    .dark .shadow-neumorphic-dark-press {
    box-shadow: inset 5px 5px 10px #4b5563,
                inset -5px -5px 10px #374151;
  }
</style>