Skip to content

Instantly share code, notes, and snippets.

@fisherds
Created February 4, 2025 19:38
Show Gist options
  • Save fisherds/1df2da9012ef3e36898b55d2c3d38b0d to your computer and use it in GitHub Desktop.
Save fisherds/1df2da9012ef3e36898b55d2c3d38b0d to your computer and use it in GitHub Desktop.
A dialog (without interactions) using only Tailwind CSS
/* eslint-disable react/prop-types */
import { useState } from "react";
export default function AddQuoteDialogWithTailwind() {
const [quote, setQuote] = useState("");
const [movieTitle, setMovieTitle] = useState("");
return (
<div className="fixed inset-0 flex items-center justify-center bg-gray-500/75 transition-opacity">
<div className="bg-white rounded-lg shadow-lg w-96 p-6">
<h2 className="text-lg font-semibold">Add a new Quote</h2>
<div className="mt-4">
<label className="block text-sm font-medium text-gray-700">
Quote
</label>
<input
type="text"
value={quote}
onChange={(e) => setQuote(e.target.value)}
className="mt-1 w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Enter a movie quote"
/>
</div>
<div className="mt-4">
<label className="block text-sm font-medium text-gray-700">
Movie Title
</label>
<input
type="text"
value={movieTitle}
onChange={(e) => setMovieTitle(e.target.value)}
className="mt-1 w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Enter movie title"
/>
</div>
<div className="mt-4 flex justify-end space-x-2">
<button
className="px-4 py-2 bg-gray-300 rounded"
>
Cancel
</button>
<button
className="px-4 py-2 bg-rosered text-white rounded"
>
Add
</button>
</div>
</div>
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment