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

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

Full width header with gradient
Header component for showing Info.

Author:
TailwindFlex

2 years ago

12.9k
Production-Ready Responsive Navigation
This is a sample content area. Scroll down to see the fixed header in action.

Author:
zobaidul kaziex

11 months ago

2.8k
A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 weeks ago

197
Hero

Author:
Aman kumar

1 year ago

6.1k
Coffee
custom

Author:
Rebecca IRANKUNDA

3 weeks ago

42
Africa Solex Ltd
Description (ibisobanuro bya website) ni text ngufi isobanura neza icyo urubuga cyangwa sosiyete yawe ikora, ikaba ifasha no mu byerekeye SEO (Search Engine Optimization). Mu nyandiko za HTML, description ishyirwa muri meta tag muri <head>.

Author:
Ele Eriksen

3 weeks ago

30
Yoga Coach Hero Section

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.7k
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

10 months ago

1.4k
Yvette
it's very good

Author:
Umutoniwase Yvette

4 weeks ago

11
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

104
Responsive Header

Author:
Rajesh Maheshwari

3 months ago

671
home
html , css

Author:
Hacker Development

1 month ago

377

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components