React + Tailwind CSS Playground

React + Tailwind PlaygroundLive

Tailwind CDN · React 18 · BabelForm Builder

Paste any React component with Tailwind classes — it renders live. Export from the builder and paste here to preview instantly.

← Build a form first

YourForm.jsx

import React, { useState } from 'react';

const ContactForm = () => {
  const [formData, setFormData] = useState({});

const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

const handleSubmit = (e) => {
    e.preventDefault();
    alert('Form submitted! Check console for data.');
    console.log(formData);
  };

return (
    <form onSubmit={handleSubmit} className="bg-white p-8 rounded-2xl shadow-lg mx-auto mt-6 space-y-5">
      <h2 className="text-2xl font-bold text-gray-800">Contact Us</h2>

<div className="grid grid-cols-2 gap-4">
        <div className="flex flex-col">
          <label className="text-gray-700 text-sm font-medium mb-1">First Name</label>
          <input type="text" name="firstname" placeholder="Jane"
            className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-400"
            onChange={handleChange} />
        </div>
        <div className="flex flex-col">
          <label className="text-gray-700 text-sm font-medium mb-1">Last Name</label>
          <input type="text" name="lastname" placeholder="Smith"
            className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-400"
            onChange={handleChange} />
        </div>
      </div>

<div className="flex flex-col">
        <label className="text-gray-700 text-sm font-medium mb-1">Email <span className="text-red-400">*</span></label>
        <input type="email" name="email" placeholder="jane@example.com" required
          className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-400"
          onChange={handleChange} />
      </div>

<div className="flex flex-col">
        <label className="text-gray-700 text-sm font-medium mb-1">Message</label>
        <textarea name="message" placeholder="How can we help?" rows={4}
          className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-400 resize-none"
          onChange={handleChange} />
      </div>

<div className="flex justify-end">
        <button type="submit"
          className="bg-[#0E8388] hover:bg-[#246c6e] text-white py-2 px-6 rounded-lg font-semibold text-sm transition">
          Send Message
        </button>
      </div>
    </form>
  );
};

export default ContactForm;

60 lines · Tab inserts 2 spacesJSX · Tailwind CSS

Live Previewready

Renders after 600ms pausesandboxed · no network access