DEV Community: Codebar Library

HTML Tag Masterclass (Part 2): Text Formatting & Typography

Codebar Library — Sun, 03 May 2026 07:01:21 +0000

Formatting text isn't just about making it look good—it's about making your website smarter, accessible, and SEO-friendly.

In Part 2 of our HTML Tag Masterclass, we cover:

✅ Headings & Paragraphs(<h1> to <h6>, <p>)
✅ Semantic Emphasis (<strong> vs <b>, <em> vs <i>)
✅ Highlighting & Edits (<mark>, <del>, <ins>)
✅ Quoting Content (<blockquote>, <q>)

Write modern, professional HTML today! 👇

Read Full Blog: https://codebarlibrary.com/blog/html-tag-masterclass-part-2-text-formatting-typography

Explore FREE UI Components & More Guides: https://codebarlibrary.com

Master UI Hierarchy with 5 Premium Glassmorphism Button Sizes!

Codebar Library — Sat, 02 May 2026 04:23:14 +0000

Consistency is king in UI design. This free component gives you a complete button size system—from XS to XL—all wrapped in a sleek glassmorphism container.

✅ XS, Small, Default, Large, XLarge sizes
✅ Glassmorphism design with purple glow
✅ Bootstrap 5.3 responsive flexbox
✅ Vanilla JS ripple effect
✅ Google Fonts typography
✅ 100% Free – Copy & Paste Ready

Perfect for dark-themed dashboards, landing pages, and modern web apps.

👉 Grab it FREE on CodeBar Library: https://codebarlibrary.com/component/adfeaccf-a8ec-4711-a457-ac8024a333d5

👉 Explore 87+ FREE UI Components: https://codebarlibrary.com

HTML Tag Masterclass (Part 1): The Skeleton & Metadata

Codebar Library — Sat, 02 May 2026 03:56:42 +0000

Before any button, any image, or any line of text, there's a hidden structure holding everything together—the HTML Skeleton.

In Part 1 of our HTML Tag Masterclass, we break down:

✅ <!DOCTYPE html> — The declaration
✅ — The root element
✅

— The brain (title, meta, links)
✅ — SEO + Mobile magic
✅ — Everything users see

Bookmark this one. It's the foundation of every website you'll ever build.

👉 Read Full Blog: https://codebarlibrary.com/blog/html-tag-masterclass-part-1-the-skeleton-metadata

👉 Explore FREE UI Components & More Guides: https://codebarlibrary.com

If HTML is the foundation and CSS is the paint, JavaScript is the electricity!

Codebar Library — Fri, 01 May 2026 04:53:57 +0000

Bring your static web pages to life! Learn JavaScript from scratch:

✅ What is JavaScript
✅ Variables & Functions
✅ DOM Manipulation
✅ Events & Event Listeners
✅ Real-world Dark Mode Toggle Example

Perfect for beginners who just finished HTML & CSS! 👇

Read Full Blog: https://codebarlibrary.com/blog/what-is-javascript-a-beginner-s-guide-to-interactive-web-pages

Visit CodeBar Library: https://codebarlibrary.com

Premium Responsive Icon Buttons with Glassmorphism and Ripple Effect

Codebar Library — Thu, 30 Apr 2026 08:09:16 +0000

Hey devs! 👋

I just published a new free UI component on CodeBar Library – Premium Glassmorphism Icon Buttons with Ripple Effect.

Tech Stack:

HTML5 + CSS3
Bootstrap 5.3 (responsive)
Vanilla JavaScript (ripple effect)
SVG icons
Google Fonts (Syne + JetBrains Mono)

Features:

🎨 Glassmorphism container
✨ Smooth hover animations
💧 Click ripple effect
📱 Fully responsive (mobile full-width)
🌙 Dark theme optimized
🎯 Multiple button styles (primary, dark, gradient, glass)

Live Preview & Get Code:
🔗 https://codebarlibrary.com/component/671086b5-61b9-463e-94de-da27efcfcf12

Would love your feedback! What other components would you like to see?

HTML is the Foundation. CSS is the Beauty.

Codebar Library — Thu, 30 Apr 2026 03:32:08 +0000

Every beautiful website you see gets its colors, layouts, and animations from CSS.

In our beginner's guide, we break down:
✅ What CSS really is
✅ 3 Ways to Add CSS (Inline, Internal, External)
✅ The Box Model (Content, Padding, Border, Margin)
✅ Colors & Typography

Perfect for beginners who just learned HTML! Start styling today. 👇

Read Full Blog: https://codebarlibrary.com/blog/what-is-css-guide-to-styling-ui-components

Visit CodeBar Library for FREE UI Components & More: https://codebarlibrary.com

Every website starts with a strong foundation.

Codebar Library — Wed, 29 Apr 2026 03:01:21 +0000

HTML is that foundation—the skeleton of every button, image, and link you see online.

In our latest blog, we break down:
✅ What HTML really is
✅ Tags, Elements & Attributes
✅ Standard HTML Boilerplate

Perfect for absolute beginners! Start building your first UI component today. 👇

Read Full Blog: https://codebarlibrary.com/blog/what-is-html-a-beginners-guide

Visit CodeBar Library for FREE UI Components, Templates & More Blogs: https://codebarlibrary.com

Premium Vibrant Gradient Buttons with Glassmorphism and Ripple Effect

Codebar Library — Sun, 19 Apr 2026 03:16:08 +0000

Solid colors and simple outlines are great, but sometimes your web application needs something that truly catches the user's eye. Gradients are making a massive comeback in modern web design, especially when paired with dark themes and smooth animations.

While updating the Button components category on Codebar Library, I wanted to build a set of highly interactive, vibrant buttons that go beyond standard styling.

Today, I’m sharing the Premium Vibrant Gradient Buttons—a free, responsive component combining Bootstrap 5, Custom CSS, and Vanilla JavaScript.

🎨 The Design: Vibrant & Dynamic
These buttons are built for modern, dark-themed applications. They feature beautifully blended background gradients (Aurora, Sunset, Ocean, Lime) housed inside a sleek glassmorphism container.

✨ Key Technical Features
To get that premium feel, I combined a few different techniques:

Animated Hover States: Custom CSS3 handles the smoothly shifting background gradients and the glowing box-shadows that appear when you interact with the button.

Precision JS Ripple Effect: I included a lightweight Vanilla JavaScript snippet. Unlike CSS-only ripples, this one calculates the exact coordinates of your click and expands the ripple outward from that specific point.

Responsive by Default: Built on top of Bootstrap 5.3, these buttons adapt automatically—expanding to full width on mobile devices and sitting inline on larger screens.

Glassmorphism Backdrop: The container utilizes backdrop-filter to create a subtle blur effect over your application's background.

Modern Typography: Uses 'Syne' and 'JetBrains Mono' Google Fonts for a clean, futuristic aesthetic.

🎥 See the Gradients and Ripple in Action
The smooth color shifts and the click animations are best seen live. Check out the demo:

🚀 Get the Source Code
You can grab the complete HTML, CSS, and the tiny JavaScript snippet needed for this component right now, completely free.

👉 Get the Vibrant Gradient Buttons on Codebar Library (Check it out under the Button components category!)

Let me know which gradient style is your favorite in the comments!

Enhance Your UI with these Animated Bootstrap 5 Solid Buttons (Free Component)

Codebar Library — Fri, 17 Apr 2026 04:20:47 +0000

Buttons are the most interacted elements on any website. Standard Bootstrap buttons are reliable and easy to use, but sometimes you need something with a bit more pop to make your UI feel modern, premium, and alive.

While expanding the Button components category on Codebar Library, I wanted to create a set of buttons that combine the familiar structure of Bootstrap 5 with some seriously slick custom CSS animations.

Today, I'm sharing the Bootstrap and Custom CSS Solid Button Collection—a free set of buttons ready to drop into your next production project.

🎨 The Design: Bold & Glowing
I designed these to stand out against dark backgrounds. They feature vibrant solid colors complemented by a soft, matching colored glow shadow that gives them a beautiful sense of depth without looking cluttered.

(Cover Image eka widiyata oya palaweni screenshot eka danna - Codebar Library page eka)

✨ What Makes Them Special?
These aren't your standard . Here is what I added using custom CSS to make them feel highly interactive:

Colored Glow Shadows: Each variant (Primary, Danger, Success, Warning, White) casts a matching ambient glow.

Spring-Bounce Hover Animation: A satisfying, responsive physical bounce effect when you hover over them.

Shimmer Overlay: A subtle, continuous shine effect that catches the eye.

Ripple Click Effect: Material-design inspired feedback whenever a user clicks the button.

Bootstrap 5 Foundation: Easy to integrate into any existing Bootstrap project.

🎥 See the Animations in Action
Pictures don't do these justice. Check out the hover, shimmer, and click ripple effects here:

🚀 Get the Free Code
Why write complex animation CSS from scratch? You can grab the HTML and the custom CSS styles for all these button variants completely for free.

👉 Get the Solid Button Collection on Codebar Library (Check it out under the Button components category!)

Let me know in the comments which UI framework you prefer using nowadays—Bootstrap or Tailwind? And if you use these buttons in your project, drop a link below!

Create Accessible, Animated Tooltips with Pure Tailwind CSS

Codebar Library — Mon, 13 Apr 2026 03:51:01 +0000

Tooltips are an essential part of modern web design. They save screen space while providing users with crucial context exactly when they need it. However, getting the positioning right, handling smooth animations, and ensuring they are accessible without relying on heavy JavaScript libraries can be surprisingly frustrating.

While building the new Tooltip components category for Codebar Library, I wanted to create a lightweight, plug-and-play solution using purely Tailwind CSS utility classes.

Today, I'm sharing the Tailwind CSS Modern Tooltip—a free, highly customizable component for your next project.

🎨 The Design: Minimal & Functional
I aimed for a sleek, unobtrusive design that blends well into any modern interface. Whether you need a simple text hint or a rich-content popover, this component handles it gracefully.

What’s Inside?
This isn't just a basic hover text. I’ve packed it with practical features that developers actually need:

4 Standard Positions: Easily place tooltips on the Top, Bottom, Left, or Right of your trigger element.

Spring-Bounce Animations: A smooth, playful enter/exit animation that makes the UI feel alive.

Color Variants: Comes with pre-styled states (Default, Danger, Success, Warning, Info) to match your context.

Rich Content Support: You aren't limited to plain text. You can easily embed avatars, icons, and even progress bars inside the tooltips.

Pure Tailwind CSS: Zero external CSS or JS dependencies. Just copy the HTML and you're good to go.

🎥 See the Animations and Variants
Take a quick look at the different positions, colors, and rich-content variations in action:

Get the Free Code
Ready to drop this into your app? You can grab the fully responsive, accessible source code right now and tweak the Tailwind classes to match your exact design system.

Get the Modern Tooltip Component on Codebar Library (Check it out under the Tooltip components category!)

Let me know in the comments if you end up using this, and feel free to suggest what component I should build next!

Add Sleek, Animated Toast Notifications to Your App with Tailwind CSS (Free Component)

Codebar Library — Thu, 09 Apr 2026 06:06:31 +0000

Building a custom toast notification system can be surprisingly tricky. You have to handle animations, managing multiple stacked toasts, auto-dismiss timers, and making sure it looks good on all screen sizes.

While adding new items to the Toast components category on Codebar Library, I wanted to create a notification system that handles all of this beautifully, using just utility classes.

Today, I’m sharing the Tailwind CSS Toast Notification component—a free, ready-to-use system to elevate your app's UI.

🔔 The Design: Clean & Stacked
I designed these toasts to be modern and unobtrusive, with a dark theme that makes the status colors (green, red, yellow, blue, purple) really pop. They stack neatly on top of each other, keeping your interface clean even when multiple alerts fire at once.

(Cover Image eka widiyata oya palaweni screenshot eka danna - Codebar Library page eka)

✨ Key Features
This component includes everything you need for a production-ready notification system:

5 Built-in States: Ready-to-use designs for Success, Error, Warning, Info, and Loading.

Smooth Animations: Spring-like enter and exit animations that feel natural.

Auto-Dismiss Progress Bar: A visual indicator showing exactly when the toast will disappear.

Interactive: Supports hover-to-pause (so users have time to read) and swipe-to-close.

100% Tailwind CSS: Easily customize colors, fonts, and sizing to match your brand.

🎥 See the Animations in Action
Check out how smoothly the toasts stack and dismiss:

🚀 Grab the Free Code
Why build from scratch when you can just copy, paste, and customize? You can grab the full source code for these toasts right now.

👉 Get the Toast Notification Component on Codebar Library (Check it out under the Toast components category!)

Let me know what you think in the comments. What other UI components would you like to see added to the library next?

I built a Sleek Dark Data Table with pure Tailwind CSS (Free Component)

Codebar Library — Wed, 08 Apr 2026 04:50:28 +0000

Building a robust, responsive, and visually appealing data table for dashboards or admin panels can sometimes be a hassle. You want it to look modern without having to write hundreds of lines of custom CSS.

That's why I designed and built this Dark Data Table for the Codebar Library — styled entirely with pure Tailwind CSS.

Features
This table is built specifically for data-heavy interfaces and comes with everything you need for a modern admin panel:

Live Search UI: Clean and intuitive search bar integration.
Status Filtering: Built-in dropdown for filtering (e.g., Active, Idle, Offline).
Checkbox Selection: Ready for bulk actions and multi-row selection.
Animated Progress Bars: Great visual indicators for project progress or revenue goals.
Fully Responsive: Adapts beautifully across different screen sizes.
Sleek Dark Theme: A modern, professional look that's easy on the eyes.

Category
You can find this specific UI element under the Table category on our site. It's designed to be a plug-and-play solution for your next Tailwind project.

🔗 Links & Resources

Let me know what you guys think in the comments! If you find it useful, don't forget to save it and check out the other free components on Codebar Library. Happy coding!