Card Title
Card content goes here.
A collection of minimal and easy to use components.
Import simplist.css with the following bit of code. Examples for all components are provided below.
<link rel="stylesheet" type="text/css" href="https://simplist.shuchir.dev/simplist.css">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Small text
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Paragraph text</p>
<small>Small text</small>
<button>Button</button>
<button class="secondary">Secondary</button>
<button class="success">Success</button>
<button class="danger">Danger</button>
<button class="warning">Warning</button>
<button class="info">Info</button>
<form>
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Name">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Email">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="*********">
<label for="message">Message</label>
<textarea id="message" name="message" placeholder="Enter some text..."></textarea>
<label for="number">Number</label>
<div class="number-input">
<input type="number" id="number" name="number">
<button type="button" class="secondary" onclick="document.getElementById('number').stepDown()">-</button>
<button type="button" class="secondary" onclick="document.getElementById('number').stepUp()">+</button>
</div>
<label for="date">Date</label>
<input type="date" id="date" name="date">
<label for="time">Time</label>
<input type="time" id="time" name="time">
<label for="datetime">Datetime</label>
<input type="datetime-local" id="datetime" name="datetime">
<label for="color">Color</label>
<div class="color-container">
<input type="color" id="color" name="color" oninput="this.parentElement.querySelector('p').innerHTML = this.value">
<p>#000000</p>
</div>
<label for="range">Range</label>
<input type="range" id="range" name="range">
<label for="file">File</label>
<input type="file" id="file" name="file">
<label for="checkbox">Checkbox</label>
<div class="selection_field">
<label for="checkbox">Apples</label>
<input type="checkbox" name="checkbox" checked>
</div>
<div class="selection_field">
<label for="checkbox">Bananas</label>
<input type="checkbox" name="checkbox">
</div>
<div class="selection_field">
<label for="checkbox">Oranges</label>
<input type="checkbox" name="checkbox">
</div>
<label for="radio">Radio</label>
<div class="selection_field">
<label for="radio">Apples</label>
<input type="radio" name="radio" checked>
</div>
<div class="selection_field">
<label for="radio">Bananas</label>
<input type="radio" name="radio">
</div>
<div class="selection_field">
<label for="radio">Oranges</label>
<input type="radio" name="radio">
</div>
<label for="select">Select</label>
<select id="select" name="select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label for="multiple">Multiple</label>
<select id="multiple" name="multiple" multiple>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<button>Submit</button>
</form>
| Name | Phone | |
|---|---|---|
| John Doe | john.doe@gmail.com | 123-456-7890 |
| Jane Doe | jane.doe@gmail.com | 123-456-7890 |
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe@gmail.com</td>
<td>123-456-7890</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>jane.doe@gmail.com</td>
<td>123-456-7890</td>
</tr>
</tbody>
</table>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<img src="https://via.placeholder.com/150" alt="Placeholder image">
<div class="alert">This is a primary alert</div>
<div class="alert secondary">This is a secondary alert</div>
<div class="alert success">This is a success alert</div>
<div class="alert danger">This is a danger alert</div>
<div class="alert warning">This is a warning alert</div>
<div class="alert info">This is an info alert</div>
<div class="progress">
<div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 100%"></div>
</div>
<span class="badge">1</span>
<span class="badge secondary">2</span>
<span class="badge success">3</span>
<span class="badge danger">4</span>
<span class="badge warning">5</span>
<span class="badge info">6</span>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
<nav>
<div>
<a>Left Content</a>
</div>
<div>
<a>Home</a>
<a>About</a>
<a>Contact</a>
</div>
</nav>
Card content goes here.
<div class="card">
<img src="https://via.placeholder.com/150" alt="Placeholder image">
<h2 class="card-title">Card Title</h2>
<p class="card-content">Card content goes here.</p>
<div class="card-footer">
<button>Read More</button>
</div>
</div>
<span class="tooltip"><span class="tooltiptext">Tooltip text</span>Hover over me</span>