组件 资本 社交媒体帖子模态

社交媒体帖子模态

一个简单、响应迅速、受 Material Design 启发的模态组件,具有相似的配色方案,适用于社交媒体应用程序。支持深色主题。

预览

HTML 代码


<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex justify-center items-center">
  <div class="relative p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
    <div class="mt-3 text-center">
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Post Created!</h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-400">Your post has been successfully shared with your followers.</p>
        <img class="mt-4 rounded-md" src="https://picsum.photos/400/200" alt="Placeholder image for social media post">
      </div>
      <div class="items-center px-4 py-3">
        <button id="ok-btn" class="px-4 py-2 bg-blue-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-900">Awesome!</button>
      </div>
    </div>
  </div>
</div>

相关组件

RetroBookingModal

一个复古主题的预订/预订模式组件,具有柔和的色彩、响应式设计和深色模式支持,适用于预约系统。

打开

GlassmorphismModalComponent (玻璃形态模态组件)

一个 Glassmorphism 风格的模态组件,具有相似的配色方案,复杂度适中,适合博客/内容显示。具有响应式设计,使用 Tailwind CSS 支持深色主题。

打开

赛博朋克学习模式

适用于教育平台的响应式赛博朋克主题模态组件,具有深色背景、霓虹灯口音和互动元素。支持深色模式。

打开