Tabbed content for your blog

11 Aug, 2026

If you ever feel like you have too many sections within a page on your site or too many links you want to categorize in a stylish way, then these might be of use to you. I wanted to create some simple, copy and paste codes that cater to Bearblog users. Simple, effective, no need to alter core CSS or inject JavaScript. Simply copy and paste into the post/page you are editing and voila!

You'll obviously need to make minor adjustments on text color/background/etc. to match the theme of your site. Other than that, though, these are basically drop and go.

Terminal/CRT tabs

HOME LOG LINKS

> Welcome

Initializing personal archive...
Connection established.

> Journal

Latest entries and updates.

> Resources

Favorite sites and tools you may wish to share.

<div class="crt-tabs">
<input type="radio" name="crt" id="crt-home" checked>
<label for="crt-home">HOME</label>
<input type="radio" name="crt" id="crt-log">
<label for="crt-log">LOG</label>
<input type="radio" name="crt" id="crt-links">
<label for="crt-links">LINKS</label>
<div class="crt-panel crt-home">
<h3>> Welcome</h3>
<p>
Initializing personal archive...<br>
Connection established.
</p>
</div>
<div class="crt-panel crt-log">
<h3>> Journal</h3>
<p>
Latest entries and updates.
</p>
</div>
<div class="crt-panel crt-links">
<h3>> Resources</h3>
<p>
Favorite sites and tools you may wish to share.
</p>
</div>
</div>
<style>

.crt-tabs{

max-width:600px;
margin:2rem auto;

background:#050505;
padding:20px;

font-family:
"Courier New",
monospace;

color:#39ff88;

border:
2px solid #222;

box-shadow:
0 0 25px rgba(0,255,100,.15);

}


.crt-tabs input{
display:none;
}


.crt-tabs label{

display:inline-block;

padding:8px 16px;

cursor:pointer;

border:
1px solid #155b30;

color:#39ff88;

}


.crt-tabs input:checked + label{

background:#39ff88;
color:#001b09;

}


.crt-panel{

display:none;

margin-top:15px;

padding:20px;

border:
1px solid #155b30;

}


#crt-home:checked ~ .crt-home,
#crt-log:checked ~ .crt-log,
#crt-links:checked ~ .crt-links{

display:block;

}


.crt-panel::after{

content:"_";

animation:
blink 1s infinite;

}


@keyframes blink{

50%{
opacity:0;
}

}

</style>

Modern tabs

About Projects Now

About

Talk about yourself.

Projects

Projects you are working on, or like, whatever.

Now

Currently reading, making, and learning.

<div class="modern-tabs">
<input type="radio" name="modern-tabs" id="modern-one" checked>
<label for="modern-one">About</label>
<input type="radio" name="modern-tabs" id="modern-two">
<label for="modern-two">Projects</label>
<input type="radio" name="modern-tabs" id="modern-three">
<label for="modern-three">Now</label>
<div class="modern-content modern-one">
<h3>About</h3>
<p>
Talk about yourself.
</p>
</div>
<div class="modern-content modern-two">
<h3>Projects</h3>
<p>
Projects you are working on, or like, whatever.
</p>
</div>
<div class="modern-content modern-three">
<h3>Now</h3>
<p>
Currently reading, making, and learning.
</p>
</div>
</div>
<style>

.modern-tabs{

max-width:600px;

margin:2rem auto;

font-family:
system-ui,
sans-serif;

}


.modern-tabs input{
display:none;
}


.modern-tabs label{

display:inline-block;

padding:
9px 18px;

margin-right:5px;

cursor:pointer;

border-radius:999px;

background:#eee;

color:#555;

transition:.2s;

}


.modern-tabs input:checked + label{

background:#111;

color:white;

}


.modern-content{

display:none;

margin-top:15px;

padding:25px;

border-radius:18px;

background:white;

border:
1px solid #ddd;

box-shadow:

0 10px 30px rgba(0,0,0,.08);

animation:
fade .25s ease;

color: #000;

}


#modern-one:checked ~ .modern-one,
#modern-two:checked ~ .modern-two,
#modern-three:checked ~ .modern-three{

display:block;

}


@keyframes fade{

from{
opacity:0;
transform:translateY(5px);
}

to{
opacity:1;
transform:none;
}

}

</style>

Retro Glossy tabs

Home About Links

Welcome

Blah blah blah.

About

About yourself... don't be shy.

Links

Favorite places around the web.

<div class="aqua-tabs">
<input type="radio" name="aqua-tabs" id="aqua-home" checked>
<label for="aqua-home">Home</label>
<input type="radio" name="aqua-tabs" id="aqua-about">
<label for="aqua-about">About</label>
<input type="radio" name="aqua-tabs" id="aqua-links">
<label for="aqua-links">Links</label>
<div class="aqua-content aqua-home">
<h3>Welcome</h3>
<p>
Blah blah blah.
</p>
</div>
<div class="aqua-content aqua-about">
<h3>About</h3>
<p>
About yourself... don't be shy.
</p>
</div>
<div class="aqua-content aqua-links">
<h3>Links</h3>
<p>
Favorite places around the web.
</p>
</div>
</div>
<style>

.aqua-tabs{
max-width:600px;
margin:2rem auto;
font-family:
-apple-system,
BlinkMacSystemFont,
"Lucida Grande",
Arial;
}


.aqua-tabs input{
display:none;
}


.aqua-tabs label{

display:inline-block;

padding:8px 22px;

cursor:pointer;

border-radius:
12px 12px 0 0;

border:1px solid #888;

background:
linear-gradient(
#fff,
#cfcfcf
);

color:#333;

box-shadow:
inset 0 1px white;

}


.aqua-tabs input:checked + label{

background:
linear-gradient(
#70c8ff,
#007aff
);

color:white;

text-shadow:
0 1px #003b75;

}


.aqua-content{

display:none;

padding:22px;

border:1px solid #888;

border-radius:
0 14px 14px 14px;

background:
linear-gradient(
white,
#eeeeee
);

box-shadow:
0 8px 20px rgba(0,0,0,.18);

}


#aqua-home:checked ~ .aqua-home,
#aqua-about:checked ~ .aqua-about,
#aqua-links:checked ~ .aqua-links{

display:block;

color: #000;

}

</style>

If this post gets any traction or support, I may make some more.