Displaying Toast Messages with Tailwind CSS

July 27, 2022 Augustus

The complete example below shows you how to create a toast, a kind of alert message that mimics the push notifications that have been popularized on mobile applications. A typical toast usually contains a brief message…

Styling Figure & Figcaption with Tailwind CSS

July 26, 2022 Augustus

In HTML, the <figure> tag is used to mark up an image while the <figcaption> tag (nests inside <figure>) displays the caption that describes the associated image. The following examples show you how to style figure…

Tailwind CSS: Grid examples (with explanations)

July 26, 2022 Augustus

Tailwind CSS provides grid utilities that are handy for creating responsive layouts with rows and columns. This tutorial article walks you through a couple of examples of using Tailwind’s grid system in action. A Brief Overview…

How to Create an Affix/Sticky Navbar with Bootstrap 5

July 18, 2022 Augustus

A sticky navbar (or an affix navbar) is a navbar that fixates to the top of the page when you scroll past it. This practical article walks you through a complete example of creating a navbar…

Tailwind CSS: How to Create Tooltips

July 8, 2022 Pennywise

A tooltip is a simple text popup tip that will be shown when the user’s mouse hovers over an element and is hidden when the mouse leaves. This succinct article walks you through a complete example…

Tailwind CSS: Create Toggle Switches without Javascript

July 7, 2022 Pennywise

This practical article shows you how to create a toggle switch by using Tailwind CSS. No Javascript or any other libraries are required. Let’s see the code and discover the trick behind the scene. Example Preview…

Tailwind CSS: Red Notification Badge with a Count

July 6, 2022 Pennywise

The example below shows you how to create red notification badges with counts in Tailwind CSS. The point here is to use the relative and absolute utility classes to place a badge in the top right…

Tailwind CSS + Font Awesome: Download Button Examples

July 5, 2022 Pennywise

In this tutorial, you’ll learn how to implement various kinds of download buttons with Tailwind CSS and Font Awesome icons (if this is the first time you use Font Awesome, see this article Using Tailwind CSS…

Tailwind CSS + Font Awesome: Loading Button Examples

July 5, 2022 Pennywise

This practical article shows you how to create common kinds of loading buttons by making use of Tailwind CSS and Font Awesome icons: Rectangular Loading Button Rounded Loading Button Circle Loading Button Disabled Loading Button if…

Tailwind CSS: Creating a Read More/Read Less Button

July 5, 2022 Pennywise

In this tutorial, we’ll go over a full example of creating a Read More/Read Less button by using Tailwind CSS in combination with a few lines of vanilla Javascript. Preview The demo webpage we’re going to…

CSS & Javascript: Change Background Color on Scroll

September 1, 2022 Pennywise

The example below shows you how to dynamically change the background color of a webpage when the user scrolls down. We only use CSS and vanilla Javascript to make this. Example Preview The full code Explanation…

Tailwind CSS: How to Create Image Modals (Image Lightboxes)

July 3, 2022 Pennywise

This practical article walks you through a complete example of creating image modals (image lightboxes) with Tailwind CSS and pure Javascript (it’s totally fine if you don’t have much experience with this programming language). Example Preview…

1 2 3 11