Creating a centered vertical border in Tailwind between two divs can be achieved by following these steps

Hey there, I'm working on creating a timeline and I'd like to have a line intersecting each year similar to this example. My tech stack includes tailwind CSS and next.js.

Although I've written some code, I can't seem to get the line centered. Here's what I have so far:

<div className="relative flex-col items-center justify-center">
  <span className="text-gray-400">2022</span>
  <div className=" h-20 border-l border-gray-400" />
  <span className="text-gray-400">2021</span>
</div>

I would really appreciate any assistance with this. Thank you!

htmlcssreactjsnext.jstailwind-css

Answer №1

My solution utilizes Pseudo-classes ::after

By enclosing each span in a div element, I have generated content after them.

<div className="relative flex-col items-center justify-center">
  <div className="after:block after:bg-black after:w-[1px] after:h-10 after:mx-auto after:my-2">
    <span className="text-gray-400">2022</span>
  </div>
  <div className="after:block after:bg-black after:w-[1px] after:h-20 after:mx-auto after:my-2">
    <span className="text-gray-400">2021</span>
  </div>
  <span className="text-gray-400">2020</span>
</div>

Result:

https://i.sstatic.net/qUW5s.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhance your HTML rendering with Vue.js directives

Check out this cool code example I created. It's a simple tabs system built using Vue.js. Every tab pulls its content from an array like this: var tabs = [ { title: "Pictures", content: "Pictures content" }, { title: "Music", c ...

javascripthtmlvue.jsvuejs2

What is the most effective method for incorporating multi-line breadcrumb links in a React application?

I am currently working on implementing a multiline breadcrumb link feature for mobile and tablet devices. As users navigate through multiple folders, I need to handle scenarios where the number of links exceeds the maximum allowed in the breadcrumb contain ...

javascripthtmlcssreactjs

Using PHP to access HTML content from a page that demands authentication

I need help developing a PHP script that can scrape data from an HTML page. Right now, it works perfectly with pages that don't require authentication. However, I'm struggling to figure out how to extract content from a page that requires users t ...

phphtml

Customize the InputFormat of the MUI DateTimePicker

I am trying to implement a custom InputFormat in the following manner 2018-01-05 13:08:00 This is an example code snippet <LocalizationProvider dateAdapter={AdapterDayjs}> <DateTimePicker renderInput={(props) => <TextField {... ...

reactjsmaterial-uidatetimepicker

Animation loading on React.js when the page or URL is changed

Just starting out with React and trying to incorporate a loading animation when the page/url changes on button click - check it out here: https://codesandbox.io/s/cthululel-7zmsl?fontsize=14 Successfully got the animation working on initial load, but runn ...

javascriptreactjsfrontend

Adjusting webpage background with JavaScript

I've been struggling with this for the past six hours and can't seem to get it right. I've checked out various solutions on Stack Overflow, but nothing seems to work. What am I missing here?!? My html5 page doesn't have a background an ...

javascriptjqueryhtmlcss

Tips for creating a responsive CSS component within a q-card while adding content

Utilizing vue and quasar, I have created this component: <template> <q-layout> <q-page-container style="background-color: #e0e5ea;"> <q-page class="column"> <menu-bar></menu-bar> ...

htmlcssvue.jsquasar-frameworkquasar

What is the best way to add permissions to each role in JavaScript?

I have been attempting to dynamically add data to an HTML table using JavaScript. The data consists of roles and their corresponding permissions, which are retrieved using Laravel's ORM. I have tried utilizing a nested each jQuery function to append t ...

javascripthtmljqueryajaxlaravel

An unusual visual anomaly (a small line appears) when hovering over a button in the web browser

There is a peculiar issue with some buttons on a web page where a strange line appears on the right side when hovering over the button. This problem only affects the first two out of three buttons, possibly because there is no fourth button to trigger the ...

cssbuttonhover

Tips for effortlessly enlarging an element

When you click on "#sidebarnav>li", the following happens: 1) The second child of it - <ul> element will expand and its class toggles between "collapse" and "collapse in". 2) "#sidebarnav>li" will receive the "active" class. 3) The "aria-ex ...

javascriptjquerycss

When React-select is toggled, it displays the keyboard

While using react-select ^1.2.1, I have come across a strange issue. Whenever I toggle the drop-down in mobile view, the keyboard pops up unexpectedly as shown in this screenshot https://i.stack.imgur.com/mkZDZ.png The component code is as follows: rende ...

javascriptreactjsreact-select

Updating state in ReactJS MaterialUI Checkboxes with onCheck() function

Working with material-ui 0.15.3 and react 15.3.0. I am struggling with using this.setState within the onCheck function of a Checkbox component. Upon testing, I realized that in order to use setState, I had to manually provide something to the checked pro ...

reactjscheckboxmaterial-ui

The service 'containerregistry.googleapis.com' has not been activated for the user 'project:next'

After dockerizing my Next.js app, I attempted to deploy it on Google Cloud. However, during the process of pushing the docker image to the registry, I encountered the following error: Unknown: Service 'containerregistry.googleapis.com' is not e ...

reactjsdockergoogle-cloud-platformnext.js

React typescript: When defining an interface in RouterProps, it is important to remember that it can only extend an object type or a combination of object types

For my React project, I decided to implement Typescript. After seeking assistance from Chatgpt, I was able to obtain this code snippet: import React from "react"; import { Route, Navigate, RouteProps } from "react-router-dom"; import { ...

reactjstypescriptreact-router-dom

Changing the global type in TypeScript

Currently, I am incorporating two third-party TypeScript libraries into my project. Interestingly, both of these libraries expose a global variable with the same name through the Window interface. However, they offer different methods for interacting with ...

reactjstypescriptglobal-variablesreact-typescript

Unable to interact with the page while executing printing functionality in

component: <div class="container" id="customComponent1"> New Content </div> <div class="container" id="customComponent2"> different content </div> ...

javascripthtmlangularprinting

Angular: Autocomplete field automatically shifts focus when an item is removed

I am currently working on an Angular 2 application that utilizes PrimeNG components. One of the UI features includes an autocomplete component with multi-select functionality (p-autoComplete) similar to the one showcased in the official documentation: < ...

javascriptcssangularautocompleteprimeng

Implementing adaptive window.scrollY listener in React to account for different screen sizes

I am currently using a useEffect hook to create a fade-in effect for text based on scroll position. While this works perfectly on my 27-inch MAC screen, I am facing challenges when viewing it on a smaller screen. I am unsure how to adjust the useEffect to ...

javascriptreactjsmaterial-ui

Alter the background shade of an item as it is added or removed from a multi-select list and transferred to another list

Is there a way to visually represent the movement of items between two multi-select lists? I have one list on the right and one on the left, and when objects move from right to left, I want them to have a red background (indicating removal) and if they mov ...

htmlcssangularjsmulti-select

Looking to maintain the value of a toggle button in a specific state depending on certain condition checks

I have a situation where I need to keep a toggle button set to "off" if my collection object is empty. Previously, I was using v-model to update the value of the toggle button. However, now I am attempting to use :value and input events, but I am strugglin ...

javascripthtmlvue.js