Created
February 4, 2025 19:38
-
-
Save fisherds/1df2da9012ef3e36898b55d2c3d38b0d to your computer and use it in GitHub Desktop.
A dialog (without interactions) using only Tailwind CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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