Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground

Initializing

Liveweave Web expand_more
build Tools expand_more
library_add Library expand_more
- AAlgolia JS
- Animate CSS
- Apex Charts JS
- BBulma CSS
- Bootstrap
- CChart JS
- Chartist
- Create JS
- DD3
- Dojo
- FFoundation
- Fullpage JS
- GGranim JS
- Google Charts
- HHalfmoon
- JjQuery
- MMaterialize
- Moment JS
- Masonry JS
- Milligram CSS
- PPure CSS
- Primer CSS
- Popper JS
- Pattern CSS
- Picnic CSS
- RReact JS
- Raphael JS
- Raisin CSS
- SSemantic UI
- Skeleton CSS
- Spectre CSS
- Tachyons CSS
- TTailwind
- Three JS
- UUI Kit
- Vis JS
- WWater CSS
download Download expand_more
- developer_mode Download as HTML
- folder_zip Download as .ZIP
account_circle Login
settings Settings expand_more
smart_display Run

boltLive Preview

<script src="https://cdn.tailwindcss.com"></script>

<div class="min-h-screen bg-slate-950 flex items-center justify-center p-6">

<div class="w-full max-w-xl">

<div class="mb-8 text-center">
      <div class="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-indigo-500/10 border border-indigo-400/20 mb-4">
        <svg class="w-6 h-6 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"
            d="M8 10h.01M12 10h.01M16 10h.01M9 16h6M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
        </svg>
      </div>

<h1 class="text-3xl font-semibold tracking-tight text-white">
        Get in touch
      </h1>

<p class="mt-2 text-sm text-slate-400">
        Tell us a little about your project and we’ll get back to you.
      </p>
    </div>

<form class="bg-slate-900/80 backdrop-blur-xl border border-white/10 rounded-3xl shadow-2xl shadow-black/30 p-7 md:p-9">

<div class="grid grid-cols-1 md:grid-cols-2 gap-5">

<div>
          <label class="block text-sm font-medium text-slate-300 mb-2">
            First name
          </label>

<input
            type="text"
            placeholder="Alex"
            class="w-full rounded-xl border border-white/10 bg-slate-950/70 px-4 py-3 text-white placeholder-slate-600 outline-none transition focus:border-indigo-400 focus:ring-4 focus:ring-indigo-500/10"
          >
        </div>

<div>
          <label class="block text-sm font-medium text-slate-300 mb-2">
            Last name
          </label>

<input
            type="text"
            placeholder="Morgan"
            class="w-full rounded-xl border border-white/10 bg-slate-950/70 px-4 py-3 text-white placeholder-slate-600 outline-none transition focus:border-indigo-400 focus:ring-4 focus:ring-indigo-500/10"
          >
        </div>

</div>

<div class="mt-5">
        <label class="block text-sm font-medium text-slate-300 mb-2">
          Email address
        </label>

<input
          type="email"
          placeholder="alex@example.com"
          class="w-full rounded-xl border border-white/10 bg-slate-950/70 px-4 py-3 text-white placeholder-slate-600 outline-none transition focus:border-indigo-400 focus:ring-4 focus:ring-indigo-500/10"
        >
      </div>

<div class="mt-5">
        <label class="block text-sm font-medium text-slate-300 mb-2">
          What can we help with?
        </label>

<select
          class="w-full rounded-xl border border-white/10 bg-slate-950/70 px-4 py-3 text-slate-300 outline-none transition focus:border-indigo-400 focus:ring-4 focus:ring-indigo-500/10"
        >
          <option>Website design</option>
          <option>Product design</option>
          <option>Development</option>
          <option>Consulting</option>
          <option>Other</option>
        </select>
      </div>

<div class="mt-5">
        <label class="block text-sm font-medium text-slate-300 mb-2">
          Project budget
        </label>

<div class="grid grid-cols-2 md:grid-cols-4 gap-3">

<label class="cursor-pointer">
            <input type="radio" name="budget" class="peer sr-only">
            <div class="rounded-xl border border-white/10 bg-slate-950/70 px-3 py-3 text-center text-sm text-slate-400 transition peer-checked:border-indigo-400 peer-checked:bg-indigo-500/10 peer-checked:text-indigo-300 hover:border-white/20">
              &lt; $5k
            </div>
          </label>

<label class="cursor-pointer">
            <input type="radio" name="budget" class="peer sr-only">
            <div class="rounded-xl border border-white/10 bg-slate-950/70 px-3 py-3 text-center text-sm text-slate-400 transition peer-checked:border-indigo-400 peer-checked:bg-indigo-500/10 peer-checked:text-indigo-300 hover:border-white/20">
              $5k–10k
            </div>
          </label>

<label class="cursor-pointer">
            <input type="radio" name="budget" class="peer sr-only">
            <div class="rounded-xl border border-white/10 bg-slate-950/70 px-3 py-3 text-center text-sm text-slate-400 transition peer-checked:border-indigo-400 peer-checked:bg-indigo-500/10 peer-checked:text-indigo-300 hover:border-white/20">
              $10k–25k
            </div>
          </label>

<label class="cursor-pointer">
            <input type="radio" name="budget" class="peer sr-only">
            <div class="rounded-xl border border-white/10 bg-slate-950/70 px-3 py-3 text-center text-sm text-slate-400 transition peer-checked:border-indigo-400 peer-checked:bg-indigo-500/10 peer-checked:text-indigo-300 hover:border-white/20">
              $25k+
            </div>
          </label>

</div>
      </div>

<div class="mt-5">
        <label class="block text-sm font-medium text-slate-300 mb-2">
          Message
        </label>

<textarea
          rows="5"
          placeholder="Tell us about your idea..."
          class="w-full resize-none rounded-xl border border-white/10 bg-slate-950/70 px-4 py-3 text-white placeholder-slate-600 outline-none transition focus:border-indigo-400 focus:ring-4 focus:ring-indigo-500/10"
        ></textarea>
      </div>

<label class="mt-5 flex items-start gap-3 cursor-pointer">
        <input
          type="checkbox"
          class="mt-1 h-4 w-4 rounded border-white/20 bg-slate-950 text-indigo-500 focus:ring-indigo-500"
        >

<span class="text-sm leading-6 text-slate-400">
          I agree to the
          <a href="#" class="text-indigo-400 hover:text-indigo-300">
            privacy policy
          </a>.
        </span>
      </label>

<button
        type="submit"
        class="mt-7 w-full rounded-xl bg-indigo-500 px-5 py-3.5 font-medium text-white shadow-lg shadow-indigo-500/20 transition hover:bg-indigo-400 hover:-translate-y-0.5 active:translate-y-0"
      >
        Send message
      </button>

<p class="mt-4 text-center text-xs text-slate-600">
        We usually respond within one business day.
      </p>

</form>

</div>

</div>