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

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

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

Ретро Мега Меню

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

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

                <'nav' class="bg-gray-800 text-retro-yellow font-retro-sans">
  <'div' class="container mx-auto px-4 sm:px-6 lg:px-8">
    <'div' class="flex items-center justify-between h-16">
      <'div' class="flex items-center">
        <'div' class="flex-shrink-0">
          <'h1' class="text-2xl font-bold">RetroShop<'/h1'>
        <'/div'>
        <'div' class="hidden md:block">
          <'div' class="ml-10 flex items-baseline space-x-4">
            <'a' href="#" class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Home<'/a'>
            <'a' href="#" class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Products<'/a'>
            <'div' class="relative group">
              <'button' class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium focus:outline-none">Categories <'/button'>
              <'div' class="absolute z-10 -ml-4 mt-3 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2 invisible group-hover:visible">
                <'div' class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
                  <'div' class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
                    <'a' href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100">
                      <'img' class="flex-shrink-0 h-6 w-6 text-retro-blue" src="https://picsum.photos/seed/retro1/20/20" alt="">
                      <'div' class="ml-4">
                        <'p' class="text-base font-medium text-gray-900">Electronics<'/p'>
                      <'/div'>
                    <'/a'>
                    <'a' href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100">
                      <'img' class="flex-shrink-0 h-6 w-6 text-retro-blue" src="https://picsum.photos/seed/retro2/20/20" alt="">
                      <'div' class="ml-4">
                        <'p' class="text-base font-medium text-gray-900">Apparel<'/p'>
                      <'/div'>
                    <'/a'>
                    <'a' href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100">
                      <'img' class="flex-shrink-0 h-6 w-6 text-retro-blue" src="https://picsum.photos/seed/retro3/20/20" alt="">
                      <'div' class="ml-4">
                        <'p' class="text-base font-medium text-gray-900">Home Goods<'/p'>
                      <'/div'>
                    <'/a'>
                  <'/div'>
                <'/div'>
              <'/div'>
            <'/div'>
            <'a' href="#" class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Contact<'/a'>
          <'/div'>
        <'/div'>
      <'/div'>
      <'div' class="-mr-2 flex md:hidden">
        <'button' type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 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'>
          <'!-- Icon when menu is closed. -->
          <'!--
            Heroicon name: outline/menu

            Menu open: "hidden", Menu closed: "block"
          -->
          <'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 12h16M4 18h16" />
          <'/svg'>
          <'!-- Icon when menu is open. -->
          <'!--
            Heroicon name: outline/x

            Menu open: "block", Menu closed: "hidden"
          -->
          <'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'>
  <'/div'>

  <'!-- Mobile menu, show/hide based on menu state. -->
  <'div' class="md:hidden" id="mobile-menu">
    <'div' class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Home<'/a'>
      <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Products<'/a'>
      <'div' class="group">
        <'button' class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium w-full text-left focus:outline-none">Categories <'/button'>
        <'div' class="pt-2 pb-3 space-y-1 px-5 invisible group-focus:visible">
          <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Electronics<'/a'>
          <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Apparel<'/a'>
          <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Home Goods<'/a'>
        <'/div'>
      <'/div'>
      <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Contact<'/a'>
    <'/div'>
  <'/div'>
<'/nav'>

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

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

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

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Sidebar -->
  <div class="sidebar w-64 bg-white dark:bg-gray-800 shadow-md">
    <div class="sidebar-header flex items-center justify-center h-16 border-b dark:border-gray-700">
      <img src="https://picsum.photos/40" alt="Logo" class="w-10 h-10 rounded-full">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white ml-3">My App</h2>
    </div>
    <div class="sidebar-nav mt-4">
      <ul>
        <li>
          <a href="#" class="flex items-center py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">
            <svg class="w-5 h-5 mr-3" 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 10h16M4 14h16M4 18h16"></path></svg>
            Dashboard
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">
            <svg class="w-5 h-5 mr-3" 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="M12 4v16m8-8H4"></path></svg>
            Settings
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">
            <svg class="w-5 h-5 mr-3" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
            Profile
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- Page Content (Placeholder) -->
  <div class="flex-1 p-6">
    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Main Content Area</h1>
    <p class="mt-4 text-gray-700 dark:text-gray-300">This is where your main page content goes.</p>
  </div>
</div>

Нейроморфизм компонента социального входа

Компонент Social Login с дизайном неоморфизма, отзывчивыми эффектами и поддержкой темных тем.

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

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="container max-w-md p-8 bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl-dark">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-6">Social Login</h2>
    <div class="flex flex-col space-y-4">
      <button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md shadow-md hover:shadow-lg dark:hover:shadow-lg-dark">
        <img src="https://www.svgrepo.com/show/303108/google-icon-logo.svg" alt="Google Icon" class="w-6 h-6">
        <span>Sign in with Google</span>
      </button>
      <button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md shadow-md hover:shadow-lg dark:hover:shadow-lg-dark">
        <img src="https://www.svgrepo.com/show/303114/facebook-176.svg" alt="Facebook Icon" class="w-6 h-6">
        <span>Sign in with Facebook</span>
      </button>
      <button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md shadow-md hover:shadow-lg dark:hover:shadow-lg-dark">
        <img src="https://www.svgrepo.com/show/303113/twitter-social-media-logo.svg" alt="Twitter Icon" class="w-6 h-6">
        <span>Sign in with Twitter</span>
      </button>
    </div>
    <div class="mt-6 text-center text-gray-600 dark:text-gray-400">
      Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a>
    </div>
  </div>
</div>

<style>
.shadow-lg-dark {
  box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #2e2e2e;
}
</style>

Минималистичная подсказка

Простой и минималистичный компонент всплывающих подсказок с поддержкой темной темы и адаптивными эффектами, созданный с использованием Tailwind CSS. Не используется JavaScript, только HTML и CSS.

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

                <div class="group relative inline-block">
  <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Hover over me</button>
  <div class="opacity-0 invisible group-hover:opacity-100 group-hover:visible absolute z-10 px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-700 dark:bg-gray-800 rounded-md shadow-sm">
    Tooltip text
    <svg class="absolute text-gray-700 dark:text-gray-800 h-2 w-full left-0 bottom-[-8px]" x="0px" y="0px" viewBox="0 0 25 25" xml:space="preserve"><polygon class="fill-current" points="0,0 12.5,25 25,0"/></svg>
  </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>

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

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

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

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Sign in with</h2>
    <div class="grid grid-cols-1 gap-4">
        <a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
            <img src="https://picsum.photos/40" alt="Google" class="mr-2 rounded-full">
            <span class="font-medium text-gray-800 dark:text-gray-200">Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
            <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Facebook" class="mr-2 rounded-full">
            <span class="font-medium text-gray-800 dark:text-gray-200">Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
            <img src="https://randomuser.me/api/portraits/women/46.jpg" alt="Twitter" class="mr-2 rounded-full">
            <span class="font-medium text-gray-800 dark:text-gray-200">Twitter</span>
        </a>
    </div>
</div>

RetroSidebarНавигация

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

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

                <div class="flex h-screen">
  <!-- Sidebar -->
  <div class="w-64 bg-gray-800 text-gray-100 retro-sidebar">
    <div class="p-4 text-2xl font-bold border-b border-gray-700 retro-title">Vaporwave Nav</div>
    <nav class="mt-4">
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-700 transition duration-300 retro-nav-item">💿 Tracks</a>
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-700 transition duration-300 retro-nav-item">📼 mixtapes</a>
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-700 transition duration-300 retro-nav-item"> neon city</a>
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-700 transition duration-300 retro-nav-item">💾💾💾 save game</a>
    </nav>
  </div>

  <!-- Page Content -->
  <div class="flex-1 p-10 text-2xl font-bold">
    <h1 class="retro-main-title">Welcome to the Grid</h1>
    <p class="mt-4 text-base retro-text">Explore the digital landscape...</p>
      <img src="https://picsum.photos/seed/retroscape/800/600" alt="Retro landscape" class="mt-8 rounded-lg shadow-lg">
  </div>
</div>

<style>
.retro-sidebar {
  background: linear-gradient(145deg, #4a0e4a, #1a051a);
  font-family: 'Press Start 2P', cursive;
}

.retro-title {
  color: #0ff;
  text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 15px #0ff, 0 0 20px #0ff;
}

.retro-nav-item {
  color: #0f0;
  text-shadow: 0 0 3px #0f0;
}

.retro-nav-item:hover {
  color: #ff0;
  text-shadow: 0 0 5px #ff0;
}

.retro-main-title {
    font-family: 'Press Start 2P', cursive;
    color: #f0f;
    text-shadow: 0 0 7px #f0f, 0 0 12px #f0f, 0 0 18px #f0f;
}

.retro-text {
    font-family: 'Press Start 2P', cursive;
    color: #0ff;
    text-shadow: 0 0 3px #0ff;
}

@media (max-width: 768px) {
  .retro-sidebar {
    width: 100%;
    height: auto;
  }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .retro-sidebar {
    background: linear-gradient(145deg, #1a051a, #4a0e4a);
  }
  .retro-title {
    color: #0f0;
    text-shadow: 0 0 5px #0f0, 0 0 10px #0f0, 0 0 15px #0f0, 0 0 20px #0f0;
  }
  .retro-nav-item {
    color: #0ff;
    text-shadow: 0 0 3px #0ff;
  }
  .retro-nav-item:hover {
    color: #f0f;
    text-shadow: 0 0 5px #f0f;
  }
  .retro-main-title {
      color: #0ff;
      text-shadow: 0 0 7px #0ff, 0 0 12px #0ff, 0 0 18px #0ff;
  }
  .retro-text {
      color: #f0f;
      text-shadow: 0 0 3px #f0f;
  }
}
</style>

Компонент временной шкалы с стекломорфизмом

Компонент временной шкалы со стилем Glassmorphism, адаптивный и с поддержкой темной темы

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

                <section class="dark:bg-gray-900 bg-gray-100 py-10">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-10">Event Timeline</h2>
        <div class="flex flex-col md:flex-row justify-center items-center">
            <!-- Event 1 -->
            <div class="flex flex-col items-center md:w-1/3 mb-8 md:mb-0 relative">
                <div class="w-32 h-32 rounded-full bg-gray-300 dark:bg-gray-700 mb-4 overflow-hidden">
                    <img class="w-full h-full object-cover" src="https://picsum.photos/200/300" alt="Event Image">
                </div>
                <div class="absolute top-16 left-1/2 transform -translate-x-1/2 w-px h-16 bg-gray-400 dark:bg-gray-600 md:top-32 md:h-8"></div>
                <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 text-center shadow-lg w-full md:w-5/6">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Event Title 1</h3>
                    <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                     <span class="text-sm text-gray-600 dark:text-gray-400">Date: March 10, 2023</span>
                </div>
            </div>
            <!-- Event 2 -->
            <div class="flex flex-col items-center md:w-1/3 mb-8 md:mb-0 relative">
                 <div class="w-32 h-32 rounded-full bg-gray-300 dark:bg-gray-700 mb-4 overflow-hidden">
                    <img class="w-full h-full object-cover" src="https://picsum.photos/200/300" alt="Event Image">
                </div>
                 <div class="absolute top-16 left-1/2 transform -translate-x-1/2 w-px h-16 bg-gray-400 dark:bg-gray-600 md:top-32 md:h-8"></div>
                <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 text-center shadow-lg w-full md:w-5/6">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Event Title 2</h3>
                    <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                     <span class="text-sm text-gray-600 dark:text-gray-400">Date: April 15, 2023</span>
                </div>
            </div>
            <!-- Event 3 -->
            <div class="flex flex-col items-center md:w-1/3 relative">
                 <div class="w-32 h-32 rounded-full bg-gray-300 dark:bg-gray-700 mb-4 overflow-hidden">
                    <img class="w-full h-full object-cover" src="https://picsum.photos/200/300" alt="Event Image">
                </div>
                 <div class="absolute top-16 left-1/2 transform -translate-x-1/2 w-px h-16 bg-gray-400 dark:bg-gray-600 md:top-32 md:h-8"></div>
                <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 text-center shadow-lg w-full md:w-5/6">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Event Title 3</h3>
                    <p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                    <span class="text-sm text-gray-600 dark:text-gray-400">Date: May 20, 2023</span>
                </div>
            </div>
        </div>
    </div>
</section>

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

Компонент Social Components с дизайном в стиле брутализм, отзывчивыми эффектами и поддержкой темных тем.

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

                <div class="bg-white dark:bg-gray-900 text-black dark:text-white border-4 border-black dark:border-white p-6">
  <div class="flex justify-between items-center mb-4">
    <h2 class="text-2xl font-bold font-mono">Social Feed</h2>
    <button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 border-2 border-black dark:border-white font-mono">Follow</button>
  </div>
  <div class="space-y-6">
    <div class="border-2 border-black dark:border-white p-4">
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
        <div class="ml-4">
          <p class="font-bold font-mono">John Doe</p>
          <p class="text-sm font-mono">@johndoe</p>
        </div>
      </div>
      <p class="mb-4 font-mono">This is an example social media post. Exciting content and brutalist design!</p>
      <img src="https://picsum.photos/600/400" alt="Post Image" class="w-full h-48 object-cover border-2 border-black dark:border-white">
      <div class="flex justify-between mt-4 font-mono">
        <span>Likes: 100</span>
        <span>Comments: 20</span>
      </div>
    </div>

    <div class="border-2 border-black dark:border-white p-4">
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
        <div class="ml-4">
          <p class="font-bold font-mono">Jane Smith</p>
          <p class="text-sm font-mono">@janesmith</p>
        </div>
      </div>
      <p class="mb-4 font-mono">Another brutalist-inspired post. Raw and captivating!</p>
      <div class="flex justify-between mt-4 font-mono">
        <span>Likes: 50</span>
        <span>Comments: 15</span>
      </div>
    </div>
  </div>
</div>

Компонент ленты действий

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

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

                <div class='flex flex-col items-center p-6 bg-gray-200 dark:bg-gray-900 rounded-lg shadow-lg'>
    <h2 class='text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4'>Activity Feed</h2>
    <div class='w-full space-y-4'>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/men/1.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>John Doe</p>
                    <p class='text-gray-500 dark:text-gray-400'>Added a new post.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/women/1.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Jane Smith</p>
                    <p class='text-gray-500 dark:text-gray-400'>Commented on your photo.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/men/2.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Mark Johnson</p>
                    <p class='text-gray-500 dark:text-gray-400'>Liked your comment.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/women/2.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Emily Davis</p>
                    <p class='text-gray-500 dark:text-gray-400'>Started following you.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://picsum.photos/200/200' alt='Random Image' class='w-10 h-10 mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Random Image</p>
                    <p class='text-gray-500 dark:text-gray-400'>Posted a new image.</p>
                </div>
            </div>
        </div>
    </div>
</div>

1 ... 262 263 264 265 266 ... 315

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

Категории

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