Corporate_Professional_Forum_Modal
A complex, responsive and professional modal component for forum/community platforms with analogous color scheme and dark mode support.
HTML Code
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75 flex items-center justify-center p-4 z-50 overflow-y-auto" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-description">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full transform transition-all sm:my-8 sm:align-middle overflow-hidden border border-gray-200 dark:border-gray-700">
<div class="px-4 py-3 sm:px-6 flex justify-between items-center bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100" id="modal-title">
Create New Discussion Topic
</h3>
<button type="button" class="text-gray-400 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
<span class="sr-only">Close panel</span>
<svg class="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 class="p-4 sm:p-6 space-y-4" id="modal-description">
<div>
<label for="topic-title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Topic Title</label>
<div class="mt-1">
<input type="text" name="topic-title" id="topic-title" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 rounded-md" placeholder="Enter a concise title" aria-required="true">
</div>
</div>
<div>
<label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Category</label>
<div class="mt-1">
<select id="category" name="category" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md dark:bg-gray-900 dark:border-gray-600 dark:text-gray-100">
<option>General Discussion</option>
<option>Technical Support</option>
<option>Feature Requests</option>
<option>Announcements</option>
</select>
</div>
</div>
<div>
<label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
<div class="mt-1">
<textarea id="description" name="description" rows="5" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md dark:bg-gray-900 dark:border-gray-600 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="Share details about your topic..."></textarea>
</div>
</div>
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
</div>
<div class="min-w-0 flex-1">
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Posting as John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Your post will be visible to all forum members.</p>
</div>
</div>
</div>
<div class="px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
<button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm dark:bg-blue-700 dark:hover:bg-blue-800">
Create Topic
</button>
<button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 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 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700">
Cancel
</button>
</div>
</div>
</div>
Related Components
Complex Earthy Business Modal with Microinteractions
A complex, responsive, earth-toned Modal Component with microinteractions, suitable for business websites, supporting dark mode.
Dark Mode Modal Component
A simple and responsive dark mode modal component designed for reading and content consumption. It features a complementary color scheme and minimal layout, suitable for blog or content-driven websites.
Skeuomorphism Earthy Modal Component
A complex, responsive Modal Component with Skeuomorphism design, Earth tones color scheme, and dark theme support for Portfolio use. Features multiple interactive elements without JavaScript.