React js UI example. timeline with year and date

React js UI example and template, timeline with year and date! . Take a look at this UI example and see how it can enhance your project. Your can copy or download the code and use it in your project. Don't forget to browse our library of other free React Native templates for even more design and functionality inspiration. Happy coding!
Tags: timeline

1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:

npx create-react-app my-awesome-project

cd my-awesome-project

npm start

2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:

npm install [email protected] --save

npm start //For start project again

3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:

import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';


function App() {
  
	return (
		<div>
			<div class="container">
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <div class="row justify-content-center mt-4 pt-3">
                        <div class="col-xl-10">
                            <ul class="timeline mb-0">
                                <li>
                                    <div class="date bg-light">
                                        <h5 class="text-uppercase mb-0 fs-16">Year 2021</h5>
                                    </div>
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="event-content">
                                                <div class="timeline-date bg-primary text-center rounded float-end">
                                                    <h3 class="text-white mb-0 fs-17">11</h3>
                                                    <p class="mb-0 text-white-50">Jun</p>
                                                </div>
                                                <div class="timeline-text">
                                                    <h3 class="fs-17">Timeline Event One</h3>
                                                    <p class="mb-0 mt-2 pt-1 text-muted">Perspitis unde omnis it voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae explicabo.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>

                                <li>
                                    <div class="date bg-light">
                                        <h5 class="text-uppercase mb-0 fs-16">Year 2021</h5>
                                    </div>
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="event-content">
                                                <div class="timeline-date bg-primary text-center rounded float-end">
                                                    <h3 class="text-white mb-0 fs-17">16</h3>
                                                    <p class="mb-0 text-white-50">Feb</p>
                                                </div>
                                                <div class="timeline-text">
                                                    <h3 class="fs-17">Timeline Event two</h3>
                                                    <p class="mb-0 mt-2 pt-1 text-muted">At vero eos dignissimos ducimus quos dolores chooses to enjoy pleasure that has no annoying.
                                                    </p>
                                                    <div class="d-flex flex-wrap align-items-start event-img mt-3 gap-2">
                                                        <img src="assets/images/small/img-2.jpg" alt="" class="img-fluid rounded" width="60"/>
                                                        <img src="assets/images/small/img-5.jpg" alt="" class="img-fluid rounded" width="60"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>

                                <li>
                                    <div class="date bg-light">
                                        <h5 class="text-uppercase mb-0 fs-16">Year 2022</h5>
                                    </div>
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="event-content">
                                                <div class="timeline-date bg-primary text-center rounded float-end">
                                                    <h3 class="text-white mb-0 fs-17">28</h3>
                                                    <p class="mb-0 text-white-50">Feb</p>
                                                </div>
                                                <div class="timeline-text">
                                                    <h3 class="fs-17">Timeline Event Three</h3>
                                                    <p class="mb-0 mt-2 pt-1 text-muted">Vivamus ultrices massa turna interdum eu. Pellentesque habitant morbi tristique eget justo sit amet est varius mollis et quis nisi. Suspendisse potenti. senectus et netus et malesuada fames ac turpis
                                                        egestas.
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>

                                <li>
                                    <div class="date bg-light">
                                        <h5 class="text-uppercase mb-0 fs-16">Year 2022</h5>
                                    </div>
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="event-content">
                                                <div class="timeline-date bg-primary text-center rounded float-end">
                                                    <h3 class="text-white mb-0 fs-17">25</h3>
                                                    <p class="mb-0 text-white-50">May</p>
                                                </div>
                                                <div class="timeline-text">
                                                    <h3 class="fs-17">Timeline Event Four</h3>
                                                    <p class="mb-0 mt-2 pt-1 text-muted">Printing and typesetting industry. been the industry'scrambled it make a type specimen book.</p>

                                                    <button type="button" class="btn btn-success btn-rounded waves-effect waves-light mt-4">See
                                                                        more detail
                                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>

                                <li>
                                    <div class="date bg-light">
                                        <h5 class="text-uppercase mb-0 fs-16">Year 2022</h5>
                                    </div>
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="event-content">
                                                <div class="timeline-date bg-primary text-center rounded float-end">
                                                    <h3 class="text-white mb-0 fs-17">30</h3>
                                                    <p class="mb-0 text-white-50">May</p>
                                                </div>
                                                <div class="timeline-text">
                                                    <h3 class="fs-17">Timeline Event Five</h3>

                                                    <p class="mb-0 mt-2 pt-1 text-muted">Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem Odit, itaque, deserunt corporis vero ipsum nisi repellat
                                                        ... <a href="#/">Read more</a></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>

                                <li>
                                    <div class="date bg-light">
                                        <h5 class="text-uppercase mb-0 fs-16">Year 2022</h5>
                                    </div>
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="event-content">
                                                <div class="timeline-date bg-primary text-center rounded float-end">
                                                    <h3 class="text-white mb-0 fs-17">31</h3>
                                                    <p class="mb-0 text-white-50">May</p>
                                                </div>
                                                <div class="timeline-text">
                                                    <h3 class="fs-17">Timeline Event End</h3>

                                                    <p class="mb-0 mt-2 pt-1 text-muted">Suspendisse tempor porttitor elit non maximus. Sed suscipit, purus in convallis condimentum, risus ex pellentesque sapien, vel tempor arcu dolor ut est. Nam ac felis id mauris fermentum nisl pharetra
                                                        auctor.
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
		</div>
	);
}
export default App;

4. Now we need to add below code into our my-awesome-project/src/App.css file :

body{
    margin-top:20px;
    background:#eee;
}

.timeline {
    display: grid;
    grid-template-columns: .25rem 1fr;
    grid-auto-columns: -webkit-max-content;
    grid-auto-columns: max-content;
    -webkit-column-gap: 2rem;
    -moz-column-gap: 2rem;
    column-gap: 2rem;
    list-style: none
}

.timeline::before {
    content: "";
    grid-column: 1;
    grid-row: 1/span 20;
    background: #f8f7fa
}

.timeline li {
    grid-column: 2;
    margin-inline:1.5rem;
    grid-row: span 2;
    display: grid;
    grid-template-rows: -webkit-min-content -webkit-min-content -webkit-min-content;
    grid-template-rows: min-content min-content min-content
}

.timeline li:not(:last-child) {
    margin-bottom: 2rem
}

.timeline li .date {
    height: 3rem;
    margin-inline:-1.5rem;
    text-align: center;
    color: #fff;
    display: grid;
    place-content: center;
    position: relative;
    border-radius: 1.5rem 0 0 1.5rem
}

.timeline li .date::before {
    content: "";
    width: 1.8rem;
    aspect-ratio: 1;
    background: #f8f7fa;
    position: absolute;
    top: 100%;
    -webkit-clip-path: polygon(0 0,100% 0,0 100%);
    clip-path: polygon(0 0,100% 0,0 100%);
    right: 0
}

.timeline li .date::after {
    content: "";
    display: block;
    position: absolute;
    width: 14px;
    height: 14px;
    background: #663b6c;
    border-radius: 15px;
    z-index: 1;
    top: 50%;
    -webkit-transform: translate(50%,-50%);
    transform: translate(50%,-50%);
    right: calc(100% + 2rem + .125rem)
}

.timeline li .title {
    position: relative;
    padding-inline:1.5rem;overflow: hidden;
    -webkit-padding-before: 1.5rem;
    padding-block-start:1.5rem;-webkit-padding-after: 1rem;
    padding-block-end:1rem;font-weight: 500
}

.timeline li .title::before {
    bottom: calc(100% + .125rem)
}

.timeline li .descr {
    position: relative;
    padding-inline:1.5rem;-webkit-padding-after: 1.5rem;
    padding-block-end:1.5rem;font-weight: 300
}

.timeline li .descr::before {
    z-index: -1;
    bottom: .25rem
}

@media (min-width: 40rem) {
    .timeline {
        grid-template-columns:1fr .25rem 1fr
    }

    .timeline::before {
        grid-column: 2
    }

    .timeline li:nth-child(odd) {
        grid-column: 1
    }

    .timeline li:nth-child(odd) .date {
        border-radius: 0 1.5rem 1.5rem 0
    }

    .timeline li:nth-child(odd) .date::before {
        -webkit-clip-path: polygon(0 0,100% 0,100% 100%);
        clip-path: polygon(0 0,100% 0,100% 100%);
        left: 0
    }

    .timeline li:nth-child(odd) .date::after {
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        left: calc(100% + 2rem + .125rem)
    }

    .timeline li:nth-child(even) {
        grid-column: 3
    }

    .timeline li:nth-child(2) {
        grid-row: 2/4
    }
}

.timeline .timeline-date {
    width: 54px;
    height: 85px;
    display: inline-block;
    padding: 8px;
    -webkit-clip-path: polygon(0 0,100% 0,100% 80%,50% 100%,0 80%);
    clip-path: polygon(0 0,100% 0,100% 80%,50% 100%,0 80%);
    z-index: 1
}

h5, h6 {
    color:#201f26 !important;
}

Similar snippets

React js template and ui example bs4 event timeline

bs4 event timeline

React js template and ui example bs4 profile with timeline posts

bs4 profile with timeline posts

React js template and ui example profile with timeline activities

profile with timeline activities

React js template and ui example bs4 my experience timeline

bs4 my experience timeline

React js template and ui example bs5 dark footer

bs5 dark footer

React js template and ui example Home menu

Home menu

React js template and ui example simple user cards contact info

simple user cards contact info

React js template and ui example Customer Reviews

Customer Reviews