Create a vertical timeline with the tablet in CSS.

I’m trying to create a vertical timeline to reference this codepen, but unfortunately it doesn’t work for me.

My code is here in this sandbox.

App.js

import styles from "./styles.module.css";

export default function App() {
  return (
    <div className="App">
      <div className={styles.carouselContentWrapper}>
        <div className={styles.year}>
          <span>2021</span>
        </div>
        <ul className={styles.textWrapper}>
          <li className={styles.text1}>Text1</li>
          <li className={styles.text2}>Text2</li>
        </ul>
      </div>
    </div>
  );
}

Styles.module.css

.textWrapper ul li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: #fff;
}

.textWrapper ul li::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: inherit;
  z-index: 1;
}

Any ideas on why this is so would be greatly appreciated.

Note: All I have to say is that I am using CSS module in my original project so I would like it to work using CSS module.

Leave a Reply

Your email address will not be published.