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

367

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

canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

5 months ago

665
Modern Website Header & Footer
I created a professional header and footer using HTML and Tailwind CSS with modern design elements, smooth animations, and interactive features.

Author:
Rathanak Phan

4 months ago

976
3D Animation Studio
3D animation is the process of creating three-dimensional products, objects, backgrounds, etc., and setting them in motion within a digital environment. It's commonly used for the web, social media marketing, product design, film, cartoons, commercials, and video games.

Author:
Nicole Shalom

5 months ago

1.1k
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

1 year ago

7.6k
Dark mode sidenav with collapsible menu

Author:
Rajesh Maheshwari

8 months ago

962
Acode Master - FB & WhatsApp UI Combo
Description (meta description) ni tag ikoreshwa mu mutwe (head) wa HTML igaragaza mu ncamake icyo urubuga cyangwa urupapuro rwawe ruvuga. Iyi description ikoreshwa cyane na search engines (nka Google) mu kwerekana summary y’urubuga mu bisubizo by’ubushakashatsi.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

503
Artisan Coffee Crafted with Care
Coffee is one of the world's most beloved beverages, enjoyed by millions daily. Here's an in-depth look at everything coffee-related.

Author:
matoleo chance

5 months ago

643
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

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

1 year ago

5.1k
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

4 months ago

769
Admin panel with collapsible menus

Author:
Rajesh Maheshwari

8 months ago

4.2k
Acode master
Welcome to Hamza's official portfolio — a creative developer blending modern design with powerful code. Explore animations, projects, and innovations crafted with HTML, Tailwind CSS, and passion.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

525
SocialConnect - Stay Connected
SocialConnect - Stay Connected

Author:
Uwera Dorcas

5 months ago

438

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components