Book

nice kbx

This tailwind example is contributed by Umutoniwase Yvette, on 24-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Header

Author Umutoniwase Yvette

631

Fork Fullscreen

<!DOCTYPE html>
<html lang="rw">
<head>
  <meta charset="UTF-8">
  <title>Library Book Borrowing Form</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <style>
  body {
  font-family: sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.form-container {
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  width: 350px;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

form label {
  display: block;
  margin-top: 10px;
  margin-bottom: 5px;
}

form input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  margin-top: 20px;
  width: 100%;
  padding: 10px;
  background-color: #2d89ef;
  color: white;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
  background-color: #1b5eab;
}
</style>

<div class="form-container">
    <h2>LOAN FORM</h2>
    <form>
      <label for="name">NAME OF STUDENT:</label>
      <input type="text" id="name" name="name" required>

<label for="student-id">ID OF STUDENT:</label>
      <input type="text" id="student-id" name="student-id" required>

<label for="level">CLASS:</label>
      <input type="text" id="level" name="level" placeholder="nko: Level 3" required>

<button type="submit">THROW BOOK</button>
    </form>
  </div>

</body>
</html>

Related Examples

Animated Title
App Logo or Main Title

Author:
khalidrootdevs

2 years ago

7.1k
Title

Author:
Morris Muriuki Muthigani

6 months ago

955
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

8 months ago

1.2k
Responsive Header
Beautiful responsive header component

Author:
Rajesh Maheshwari

11 months ago

2.1k
section header

Author:
Raul antonio de la cruz hernandez

2 months ago

329
Responsive Header and Hero Section Design
Responsive Header and Hero Section Design provides flexible adaptability across all screen sizes and devices.

Author:
ABDO-SY

11 months ago

2.7k
Full width header with gradient
Header component for showing Info.

Author:
TailwindFlex

3 years ago

13.4k
Responsive Tailwind CSS Header with Navigation & Buttons | Ready to Use
A fully responsive and modern header built with Tailwind CSS. Features a sleek navigation menu, login/register buttons, and adaptive design for all screen sizes. Open-source and easy to integrate into any web project!

Author:
Abdul Baset Bappy

10 months ago

2.1k
Animated navigation with Tailwind CSS and Apinejs

Author:
Michael Andreuzza

1 year ago

5.1k
SocialConnect - Stay Connected
SocialConnect - Stay Connected

Author:
Uwera Dorcas

8 months ago

727
Hero

Author:
Hasan AlDoy (McDoy)

1 year ago

1.5k
Software Developer
A software developer designs, builds, tests, and maintains software applications and systems. They use programming languages to create code that meets user needs and client specifications. Software developers may work on various projects, including applications, systems software, or web development

Author:
nii fanny

8 months ago

965

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components