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

293

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

Creative Hero Section

Author:
Ijila Itunu

5 months ago

862
Enhanced Modern Navbar
The navbar now feels premium and modern while maintaining all original functionality. The glassmorphism effect, smooth animations, and professional styling create a cutting-edge user experience that would fit perfectly on any modern website!

Author:
Rathanak Phan

4 months ago

471
No one
nice

Author:
Umutoniwase Yvette

4 months ago

253
Heade With Hero Section

Author:
Abdul Baset Bappy

3 months ago

754
Job Platfoam
If you need a Job You will Have to Apply for it

Author:
soft mind

4 months ago

591
Animated navigation with Tailwind CSS and Apinejs

Author:
Michael Andreuzza

1 year ago

4.5k
Title

Author:
Morris Muriuki Muthigani

2 months ago

384
SocialConnect - Stay Connected
SocialConnect - Stay Connected

Author:
Uwera Dorcas

4 months ago

370
page heaading stacked
yeah booy, oh booy, o buy

Author:
Anonymous

1 year ago

9.5k
Markert shop
wellcome tothe my online shoping

Author:
Umutoniwase Yvette

4 months ago

156
Active Beauty Main Page

Author:
Maxim

6 months ago

900
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

4 months ago

326

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components