Scribd
Upload
24 views5 pages

Practical 6

The document demonstrates using Tailwind CSS in HTML pages. It shows how to add Tailwind, create buttons and forms, change colors on hover, and build a form to collect book information.

Uploaded by

nidz2245
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
24 views5 pages

Practical 6

The document demonstrates using Tailwind CSS in HTML pages. It shows how to add Tailwind, create buttons and forms, change colors on hover, and build a form to collect book information.

Uploaded by

nidz2245
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

PRACTICAL-6

NAME: - Nidhi Bangar


ROLL NO.: - 22bcm044
COURSE CODE & NAME: - 2CS201 FSWD
AIM: - Demonstrate Tailwind CSS through HTML web pages
a) Tailwind using CSS in HTML: Add the Play CDN script to your HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Practical 6a</title>
</head>
<body>
<div class="bg-green-500 text-white p-5">
<h1 class="text-3xl font-bold">Hello, Tailwind CSS!</h1>
<p class="mt-3">Welcome to FSWD lab.</p>
</div>
</body>
</html>

b) Tailwind CSS that describes how to change the background color on mouse

hover.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Practical 6b</title>
</head>
<body>
<div class="h-full border-2 border-gray-200
border-opacity-60 rounded-lg
overflow-hidden">
<div class="p-6 hover:bg-pink-600
hover:text-white transition
duration-300 ease-in">
<h1 class="text-2xl font-semibold mb-3"> Hover over me!</h1>
</div>
</div>
</body>
</html>

b) Create a web page with fields for book title, author name, publisher name, published
year, ISBN, and quantity. Each input field is styled using Tailwind CSS utility classes
for layout, typography, and form elements.

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Information</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="bg-pink-100 p-8">

<div class="max-w-md mx-auto bg-white rounded p-6 shadow-md">


<h1 class="text-2xl font-semibold mb-4">Book Information</h1>
<form action="#" method="post" enctype="multipart/form-data">
<div class="mb-4 flex">
<div class="w-1/2 mr-2">
<label for="title" class="block text-sm font-medium text-
gray-600">Title</label>
<input type="text" id="title" name="title" class="mt-1 p-2
w-full border rounded-md" pattern="[A-Za-z\s]+" title="Title must contain only
alphabetic characters" required>
</div>
<div class="w-1/2 ml-2">
<label for="author" class="block text-sm font-medium text-
gray-600">Author Name</label>
<input type="text" id="author" name="author" class="mt-1
p-2 w-full border rounded-md" pattern="[A-Za-z\s]+" title="Author name must
contain only alphabetic characters" required>
</div>
</div>

<div class="mb-4">
<label for="authorImage" class="block text-sm font-medium
text-gray-600">Author Image</label>
<input type="file" id="authorImage" name="authorImage"
class="mt-1 p-2 w-full border rounded-md">
<img id="authorImagePreview" class="mt-2" style="display:none;
max-width: 200px;">
</div>

<div class="mb-4">
<label for="bookImage" class="block text-sm font-medium text-
gray-600">Book Image</label>
<input type="file" id="bookImage" name="bookImage" class="mt-1
p-2 w-full border rounded-md">
<img id="bookImagePreview" class="mt-2" style="display:none;
max-width: 200px;">
</div>

<div class="mb-4 flex">


<div class="w-1/2 mr-2">
<label for="publisher" class="block text-sm font-medium
text-gray-600">Publisher Name</label>
<input type="text" id="publisher" name="publisher"
class="mt-1 p-2 w-full border rounded-md" pattern="[A-Za-z\s]+"
title="Publisher name must contain only alphabetic characters" required>
</div>
<div class="w-1/2 ml-2">
<label for="publicationDate" class="block text-sm font-
medium text-gray-600">Publication Date</label>
<input type="date" id="publicationDate"
name="publicationDate" class="mt-1 p-2 w-full border rounded-md">
</div>
</div>

<div class="mb-4">
<label for="isbn" class="block text-sm font-medium text-gray-
600">ISBN (13 digits)</label>
<input type="text" id="isbn" name="isbn" class="mt-1 p-2 w-
full border rounded-md" pattern="[0-9]{13}" title="ISBN must be a 13-digit
number">
</div>

<div class="mb-4 flex">


<div class="w-1/2 mr-2">
<label for="quantity" class="block text-sm font-medium
text-gray-600">Quantity </label>
<input type="number" id="quantity" name="quantity"
class="mt-1 p-2 w-full border rounded-md" min="1" required>
</div>
<div class="w-1/2 ml-2">
<label for="genre" class="block text-sm font-medium text-
gray-600">Genre</label>
<select id="genre" name="genre" class="mt-1 p-2 w-full
border rounded-md">
<option value="fiction">Fiction</option>
<option value="non-fiction">Non-Fiction</option>
<option value="mystery">Mystery</option>
<option value="fantasy">Fantasy</option>
<option value="science-fiction">Science
Fiction</option>
</select>
</div>
</div>

<div class="mb-2">
<label for="description" class="block text-sm font-medium
text-gray-600">Description</label>
<textarea id="description" name="description" class="mt-1 p-2
w-full border rounded-md" rows="4"></textarea>
</div>
<button type="submit" class="bg-blue-500 text-white p-2 rounded-md
hover:bg-blue-700">Submit</button>
</form>
</div>
</body>
</html>

You might also like