Tailwind CSS: How to Create an Off-Canvas Side Menu

June 20, 2022 Pennywise

An off-canvas menu is a side navigation menu that pushes the content to the right (or left, bottom, top directions) when it shows up (it doesn’t overlap or cover content). A user can open or close…

How to Create Toggleable Tabs with Tailwind CSS

June 20, 2022 Pennywise

Tabs help you organize groups of content that are related and at the same level of hierarchy without taking much space. This article walks you through a complete example of implementing toggleable and switchable tabs with…

Tailwind CSS: How to Create a Back To Top Button

June 20, 2022 Pennywise

This article walks you through a complete example that demonstrates how to create a back to top button with Tailwind CSS and a little vanilla Javascript (just a few lines). The purpose of this button is…

How to Style the HR Element with Tailwind CSS

June 17, 2022 Pennywise

An HTML <hr/> tag creates a horizontal ruler/line to separate sections of your webpage. In order to style a <hr> element, we can use border-* utility classes provided by Tailwind CSS. Utilities in terms of size…

How to Create Product Cards with Tailwind CSS

June 17, 2022 Pennywise

The example below shows you how to create a modern product card with Tailwind CSS. It contains a product image, product name, offers and warranties, prices and promotions, a button to add to the shopping cart,…

How to Create Triangles with Tailwind CSS (4 Examples)

June 16, 2022 Pennywise

This practical article walks you through four examples of creating triangles with Tailwind CSS. Example 1: Triangle Left Screenshot: The code: Example 2: Triangle Up It closely resembles a cone. Screenshot: The code: Example 3: Triangle…

Tailwind CSS: Expand a Text Input on Focus (without Javascript)

June 16, 2022 Pennywise

The example below shows you how to create an animated text field that can expand its width on focus (and shrink when losing focus). We’ll achieve this thing with only Tailwind CSS. No Javascript code is…

Tailwind CSS: How to Disable Resizing of Textarea

June 16, 2022 Pennywise

In Tailwind CSS, you can prevent a <textarea> from being resized by using the resize-none utility class. When the textarea is unresizable, the resizer icon will disappear as well. Example: Screenshot: Further reading: Using Tailwind CSS…

Tailwind CSS: How to Disable Text Selection

June 16, 2022 Pennywise

In Tailwind CSS, you can prevent text from being selected by using the select-none utility class. Example: The code: Further reading: Using Tailwind CSS with Font Awesome Icons: A Deep Dive Tailwind CSS: Create a Responsive…

Tailwind CSS: How to Create a Vertical Divider Line

June 16, 2022 Pennywise

The example below shows you how to create a vertical line that splits a web page into two equal parts. Screenshot: The code: Further reading: Using Tailwind CSS with Font Awesome Icons: A Deep Dive Tailwind…

Using Tailwind CSS with Font Awesome Icons: A Deep Dive

June 15, 2022 Pennywise

Tailwind CSS is a popular CSS framework that can help you style your website without leaving your HTML code. Font Awesome is one of the most used icon kits ever. Using them together can improve the…

Tailwind CSS: Create a Responsive Top Navigation Menu

June 14, 2022 Pennywise

This succinct, practical article walks you through a complete example of creating a responsive top navigation menu with Tailwind CSS and a little vanilla Javascript (just a few lines of Javascript code). Without any further ado,…

1 2 3 4 10