Home
seth dridi
create event modified

create event modified

it is the layout for creating an event

This tailwind example is contributed by seth dridi, on 16-Aug-2024. Component is made with Tailwind CSS v3. It is responsive.

Form

Author seth dridi

1.8k

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">
        <select id="status" name="status" class="block w-full h-12 rounded-md border-gray-300 shadow-sm focus:border-[#8c0327] focus:ring-[#8c0327] focus:ring-opacity-50" style="background-color: #f6f6f6; padding: 0;">
          <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 h-12" 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

Modern responsive Newsletter form
Responsive newsletter subscriber form

Author:
Emdadul Islam

1 year ago

2.2k
Login Form with Icon

Author:
Prashant

3 years ago

17.2k
contact us form
contact us form that uses the Free VeilMail EmailProtection Service too!

Author:
Geoffrey Callaghan

1 year ago

6.2k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

3k
Login Form
Admin Login Form

Author:
Khalid

1 year ago

2.1k
Register Form
A simple and minimalistic register form.

Author:
Sonam Sherpa

2 days ago

20
Feedback Form with fabform.io

Author:
Ho O

8 months ago

983
Contact us Form with Responsive

Author:
KULDEEP

2 months ago

195
Email format
This is a ui component to be used to send emails with custom design (deigned with tailwindcss)

Author:
Ranit Saha

8 months ago

969
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Author:
Bunny

3 years ago

49.4k
Login oauth Form

Author:
Rihane SOLID SNAKE

3 months ago

130
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components