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

384

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

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)

6 months ago

718
section header

Author:
Raul antonio de la cruz hernandez

1 day ago

6
Hero Section
Hero section design concept

Author:
Raul antonio de la cruz hernandez

1 day ago

13
Hero

Author:
Aman kumar

1 year ago

6.8k
Hero Section
A 2 column responsive hero section

Author:
Emdadul Islam

1 year ago

2.5k
Dark mode sidenav with collapsible menu

Author:
Rajesh Maheshwari

9 months ago

992
Header with svg background

Author:
R.P Ketan

2 years ago

13.4k
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

5 months ago

914
Promotional sticky top section

Author:
Leon Bachmann

2 years ago

12.4k
Responsive Header
Beautiful responsive header component

Author:
Rajesh Maheshwari

9 months ago

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

Author:
zobaidul kaziex

1 year ago

3.4k
Sticky Changelog

Author:
Michael Andreuzza

1 year ago

2.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components