Sling Academy
Home/Tailwind CSS/Tailwind CSS: How to Create a Vertical Divider Line

Tailwind CSS: How to Create a Vertical Divider Line

Last updated: December 09, 2023

In the context of web development, a vertical divider line is a line that separates two or more sections or columns of a web page. It is used to create a visual distinction or a logical separation between different parts of the content. For example, you can use a vertical divider line to separate a sidebar from the main content or to divide a list of items into categories.

The example below shows you how to use Tailwind CSS and a <div> element to create a vertical line that splits a web page into two equal parts.

Screenshot:

The code:

<body class="bg-amber-200 relative">
    <div class="absolute left-1/2 -ml-0.5 w-0.5 h-screen bg-gray-600"></div>
</body>

Code explained: The main idea here is to display a long and narrow <div> element (by using the w-0.5 and h-screen classes) with a contrastive background color (bg-gray-600).

Happy coding & have a nice day!

Next Article: Using ::before and ::after in Tailwind CSS

Previous Article: How to Change Mouse Cursor in Tailwind CSS

Series: Basic Tailwind CSS Tutorials for Beginners

Tailwind CSS

Related Articles

You May Also Like

  • How to Create Striped Tables with Tailwind CSS
  • Tailwind CSS: Creating Shimmer Loading Placeholder (Skeleton)
  • Tailwind CSS: How to Create Parallax Scrolling Effect
  • How to Style Lists in Tailwind CSS
  • Text Underline in Tailwind CSS
  • How to Change Mouse Cursor in Tailwind CSS
  • Form Validation with Tailwind CSS (without Javascript)
  • first-of-type and last-of-type in Tailwind CSS
  • Tailwind CSS: Create a User Card with Circle Avatar
  • Tailwind CSS: How to Create Columns with the Same Height
  • How to Style Placeholder Text with Tailwind CSS
  • Tailwind CSS: Make a Div 100% Height & Width of the Viewport
  • Using :not() selector in Tailwind CSS
  • Tailwind CSS: How to Create a Stepper
  • Using ::before and ::after in Tailwind CSS
  • How to Create Pill Buttons with Tailwind CSS
  • Tailwind CSS: How to Disable Text Selection
  • Tailwind CSS: How to Disable Resizing of Textarea
  • Tailwind CSS: Expand a Text Input on Focus (without Javascript)