create event

it is the layout for creating an event

This tailwind example is contributed by seth dridi, on 17-Aug-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Register, Sign in

Author seth dridi

Tailwind v3.4 169

Fork Fullscreen

<div class="container mx-auto p-4">
  
  <h1 class="text-3xl font-bold text-[black] mb-6">Create Event</h1>

<div class="p-2">
      <select id="category" name="category" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-[#8c0327] focus:ring-[#8c0327] focus:ring-opacity-50 p-2" style="background-color: #f6f6f6;">
        <option value="">Select a category</option>
        <option>Music</option>
        <option>Sports</option>
        <option>Arts</option>
        <option>Technology</option>
      </select>
    </div>

<div class="p-2 grid grid-cols-1 md:grid-cols-2 gap-6">
      
      <div>
        <textarea id="description" name="description" rows="3" placeholder="Event Description" class="block w-full h-48 rounded-md border-gray-300 shadow-sm focus:border-[#8c0327] focus:ring-[#8c0327] focus:ring-opacity-50 p-2" style="background-color: #f6f6f6;"></textarea>
      </div>

<div>
        <label for="image-upload" class="block w-full h-48 border-2 border-dashed border-gray-300 rounded-md cursor-pointer flex flex-col items-center justify-center bg-[#f6f6f6] hover:bg-gray-50">
          <div class="text-center">
            <div class="mb-2">
              <button type="button" class="bg-[#8c0327] hover:bg-[#6b0220] text-white rounded-full py-2 px-4">Select from the computer</button>
            </div>
            <p class="text-gray-500">or drag photo here</p>
            <p class="text-gray-500 text-sm mt-1">PNG, JPG, SVG</p>
          </div>
        </label>
        <input id="image-upload" name="image" type="file" accept="image/*" class="sr-only">
      </div>
    </div>

<div class="p-2">
      <input type="text" id="location" name="location" placeholder="Location" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-[#8c0327] focus:ring-[#8c0327] focus:ring-opacity-50 p-2" style="background-color: #f6f6f6;">
    </div>

<div class="p-2 grid grid-cols-1 md:grid-cols-2 gap-6">
      
      <div>
        <input type="text" id="organizer-name" name="organizer-name" placeholder="Organizer Name" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-[#8c0327] focus:ring-[#8c0327] focus:ring-opacity-50 p-2" style="background-color: #f6f6f6;">
      </div>

<div>
        <input type="email" id="organizer-email" name="organizer-email" placeholder="Organizer Email" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-[#8c0327] focus:ring-[#8c0327] focus:ring-opacity-50 p-2" style="background-color: #f6f6f6;">
      </div>
    </div>

<div class="p-2">
      <input type="text" id="organizer-address" name="organizer-address" placeholder="Organizer Address" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-[#8c0327] focus:ring-[#8c0327] focus:ring-opacity-50 p-2" style="background-color: #f6f6f6;">
    </div>

<div class="p-2 grid grid-cols-1 md:grid-cols-2 gap-6">
      
      <div class="flex items-center bg-[#f6f6f6] rounded-md p-2">
        <span class="flex-shrink-0 flex items-center mr-3 text-gray-500">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v2M19 3v2M5 10h14M4 21h16a1 1 0 001-1V8a1 1 0 00-1-1H4a1 1 0 00-1 1v12a1 1 0 001 1z"></path>
          </svg>
          <span class="ml-2">Start Date</span>
        </span>
        <input type="datetime-local" id="start-date" name="start-date" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-[#8c0327] focus:ring-[#8c0327] focus:ring-opacity-50 p-2" style="background-color: #f6f6f6;">
      </div>

<div class="flex items-center bg-[#f6f6f6] rounded-md p-2">
        <span class="flex-shrink-0 flex items-center mr-3 text-gray-500">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v2M19 3v2M5 10h14M4 21h16a1 1 0 001-1V8a1 1 0 00-1-1H4a1 1 0 00-1 1v12a1 1 0 001 1z"></path>
          </svg>
          <span class="ml-2">End Date</span>
        </span>
        <input type="datetime-local" id="end-date" name="end-date" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-[#8c0327] focus:ring-[#8c0327] focus:ring-opacity-50 p-2" style="background-color: #f6f6f6;">
      </div>
    </div>

<div class="p-2 grid grid-cols-1 md:grid-cols-2 gap-6">
      
      <div class="flex items-center bg-[#f6f6f6] rounded-md p-2">
        <span class="flex-shrink-0 flex items-center mr-3 text-gray-500">
          <label for="status" class="block">Status</label>
        </span>
        <select id="status" name="status" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-[#8c0327] focus:ring-[#8c0327] focus:ring-opacity-50 p-2" style="background-color: #f6f6f6;">
          <option value="">Select Status</option>
          <option value="active">Active</option>
          <option value="inactive">Inactive</option>
        </select>
      </div>

<div>
        <input type="text" id="tags" name="tags" placeholder="Tags (comma-separated)" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-[#8c0327] focus:ring-[#8c0327] focus:ring-opacity-50 p-2" style="background-color: #f6f6f6;">
      </div>
    </div>

<div class="col-span-full mt-6 p-2">
      <button type="submit" class="block w-full bg-[#8c0327] hover:bg-[#6b0220] text-white font-bold py-3 px-4 rounded-full">
        Register for Event
      </button>
    </div>
  </form>
</div>

Related Examples

Registration Form

Maxim

1 year ago

1.7k
Login form with social login buttons

Task Master

3 years ago

20.4k
Modern Neo-Brutalist Login Page – Dark & Light Mode with Tailwind CSS
A bold and functional login interface inspired by Neo-Brutalist design, built with Tailwind CSS. Features crisp typography, high-contrast elements, and smooth interactive states. Fully responsive and ready to integrate into any modern web application.

Homayoun

10 months ago

667
Modern Login Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

Anonymous

2 years ago

3.7k
Neon login Form #3
Login form neon design.

QQ-VVN

1 year ago

853
Login form with fully functionl and best
@sufyandevs #sufyandevs #sufyandev #shanwebdev

Sufyan jutt

11 months ago

954
Login
Login form, responsive, no dark-mode for white backgrounds, elegant for any platform

Ameth Galarcio

2 years ago

5.3k
Login Form
Login Form template using angular

nitro-x

3 months ago

201
mechanical login
mechanical

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.9k
Responsive login form with image

Lukas Müller

3 years ago

16.6k
Registration form

Juan D. Cortorreal

10 months ago

643
FacePass: Animated Image Authentication
"Where your image becomes your key" "Biometric meets beautiful animations" "A login experience that recognizes you – literally" "Security through personalized visual authentication" "Your face, animated, authenticated"

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

2k