Posting here too since crossposting is disabled.
I wanted to share some minimal, unstyled and self-contained components that you can copy, paste and modify according to your needs.
Hover Popover:
<div class="wrapper">
<div class="button">
TRIGGER
</div>
<div class="content">
YOUR CONTENT
</div>
</div>
<style>
.wrapper {
position: relative;
display: block;
float: left;
}
.button {
display: block;
}
.content {
display: none;
width: 200px;
}
.content:hover {
position: absolute;
display: block;
}
.button:hover ~ .content {
position: absolute;
display: block;
}
</style>
Click Popover:
<div class="wrapper">
<label class="button">
<input type="checkbox" class="trigger" />
TRIGGER
</label>
<div class="content">CONTENT</div>
</div>
<style>
.wrapper {
position: relative;
}
.content {
display: none;
}
.trigger {
display: none;
}
.button:has(.trigger:checked) ~ .content {
display: block;
}
</style>
Input validation:
<form>
<input
required
placeholder="Username"
pattern="[a-zA-Z0-9]+"
minlength="2"
maxlength="32"
/>
<div class="error-message">Error: the username must have between 2 and 32 characters and contain only alphanumeric values.</div>
</form>
<style>
input:user-invalid {
border: 1px solid red;
}
input:user-invalid ~ .error-message {
display: block;
}
.error-message {
display: none;
color: red;
}
</style>
Tabs:
<div class="tabs">
<div class="tab">
<input value="a" name="tabs" type="radio" id="tab-a" />
<label class="header" for ="tab-a">header-a</label>
<div class="content">content-a</div>
</div>
<div class="tab">
<input value="b" name="tabs" type="radio" id="tab-b" />
<label class="header" for ="tab-b">header-b</label>
<div class="content">content-b</div>
</div>
</div>
<style>
.tabs {
flex-wrap: wrap;
display: flex;
}
.tab {
display: contents;
}
.tab input {
display: none;
}
.header {
order: -1;
}
input:checked ~ .header {
background: lightgray;
}
.content {
width: 100%;
order: 1;
}
input:not(:checked) ~ .content {
display: none;
}
</style>
Accordion:
<div>
<details>
<summary>header-a</summary>
<div>content-a</div>
</details>
<details>
<summary>header-b</summary>
<div>content-b</div>
</details>
<details>
<summary>header-c</summary>
<div>content-c</div>
</details>
</div>
Modal:
<a href="#modal">TRIGGER</a>
<div id="modal" class="overlay">
<a class="cancel" href="#"></a>
<div class="modal">
<a class="close" href="#">×</a>
<div class="content">CONTENT</div>
</div>
</div>
<style>
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
visibility: hidden;
opacity: 0;
transition: opacity 250ms;
.cancel {
position: absolute;
width: 100vw;
height: 100vh;
cursor: default;
}
&:target {
visibility: visible;
opacity: 1;
}
}
.modal {
/* Any margin you want */
margin: 100px auto;
/* Any height you want (remove to adjust to the content height) */
height: 200px;
/* Any width you want */
width: 300px;
background: #fff;
border: 1px solid gray;
position: relative;
.close {
position: absolute;
width: 20px;
height: 20px;
top: 0;
right: 0;
font-size: 24px;
}
.content {
overflow: auto;
}
}
</style>
Feel free to suggest other general purpose components that we can add to this list :)