Компоненты Столица Модальный компонент

Модальный компонент

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

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

HTML-код

<div class="fixed z-50 inset-0 flex items-center justify-center bg-gray-800 bg-opacity-75 dark:bg-gray-900 transition-opacity duration-500 ease-in-out" aria-labelledby="modal-title" role="dialog" aria-modal="true">
  <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full">
    <div class="bg-gray-100 dark:bg-gray-700 px-4 py-5 sm:px-6">
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100" id="modal-title">
        Share Your Thoughts
      </h3>
      <div class="mt-2">
        <p class="text-sm text-gray-500 dark:text-gray-300">
          Engage with your friends and share ideas or posts directly here.
        </p>
      </div>
    </div>
    <div class="p-6">
      <form class="space-y-4">
        <textarea class="w-full h-24 p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500" placeholder="What's on your mind?"></textarea>
        <div class="flex items-center space-x-4">
          <img class="w-10 h-10 rounded-full shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
          <button type="submit" class="inline-flex justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
            Post
          </button>
        </div>
      </form>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
      <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
        Close
      </button>
    </div>
  </div>
</div>

Связанные компоненты

Модальный компонент темного режима

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

Открытый

Модальное окно ретро-блога

Модальный компонент в стиле ретро-винтаж для контента блога, отличающийся дополнительной цветовой схемой, умеренной сложностью с интерактивными элементами, адаптивным дизайном и поддержкой темного режима. Не используется JavaScript, полагаясь исключительно на HTML и CSS-классы Tailwind. Изображения взяты с сайта picsum.photos, а аватары — с сайта randomuser.me.

Открытый

Корпоративный 3D триадический модальный

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

Открытый