JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="awards-container">
    <div class="heading">
        <h2 class="font-34 fira-bold">ჯილდოები</h2>
    </div>
    <div class="main-content">
        <div class="row">
            <div class="side">
                <a href="">
                    <h2 class="font-21 noto-bold">The British Insurance Awards</h2>
                    <div class="desc">
                        <div class="year noto-bold font-16">2019</div>
                        <div class="text">საუკეთესო სადაზღვევო კომპანია აღმოსავლეთ ევროპა</div>
                    </div>
                </a>
            </div>
            <div class="side">
                <a href="">
                    <h2 class="font-21 noto-bold">The British Insurance Awards</h2>
                    <div class="desc">
                        <div class="year noto-bold font-16">2019</div>
                        <div class="text">საუკეთესო სადაზღვევო კომპანია აღმოსავლეთ ევროპა</div>
                    </div>
                </a>
            </div>
            <svg class="drop-line" xmlns="http://www.w3.org/2000/svg" width="1555.746" height="0.5" viewBox="0 0 1555.746 0.5">
              <path id="Path_9264" data-name="Path 9264" d="M655-7923.56H2210.246" transform="translate(-654.75 7923.81)" fill="none" stroke="#9199b4" stroke-linecap="round" stroke-width="0.5" stroke-dasharray="5"/>
            </svg>
            <svg class="center-line" xmlns="http://www.w3.org/2000/svg" width="1" height="25.032" viewBox="0 0 0.5 25.032">
              <path id="Path_10029" data-name="Path 10029" d="M655-7923.56h24.532" transform="translate(-7923.309 -654.75) rotate(90)" fill="none" stroke="#9199b4" stroke-linecap="round" stroke-width="0.5" stroke-dasharray="5"/>
            </svg>

        </div>
        <div class="row">
            <div class="side">
                <a href="">
                    <h2 class="font-21 noto-bold">The British Insurance Awards</h2>
                    <div class="desc">
                        <div...

CSS

body {
    margin: 0;
}
* {
    box-sizing: border-box;
}
.awards-container {
    width: 100%;
    position: relative;
    padding: 0 100px;
}
.awards-container .heading h2 {
    text-align: center;
}
.awards-container .main-content {
    padding: 20px 85px;
    margin-top: 55px;
    -webkit-box-shadow: 0px 10px 20px 0px rgba(0,153,255,0.05);
    -moz-box-shadow: 0px 10px 20px 0px rgba(0,153,255,0.05);
    box-shadow: 0px 10px 20px 0px rgba(0,153,255,0.05);
}
.awards-container .main-content .row {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    overflow: hidden;
}
.awards-container .main-content .row .side {
    width: 50%;
    padding: 40px 0;
    position: relative;
}
.awards-container .main-content .row .side:nth-child(odd) {
    padding-right: 30px;
}
.awards-container .main-content .row .side:nth-child(even) {
    padding-left: 150px;
}
.awards-container .main-content .row svg.drop-line {
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
}
.awards-container .main-content .row svg.center-line {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(0,-50%);
}
.awards-container .main-content .row .side h2 {
    transition: .6s;
}
.awards-container .main-content .row .side a:hover h2 {
    color: #EE2A7B;
}
.awards-container .main-content .row .side .desc {
    display: flex;
    align-items: center;
}
.awards-container .main-content .row .side .desc .year {
    color: #EE2A7B;
    margin-right: 5px;
}
.awards-container .main-content .row:last-child svg.drop-line {
    display: none;
}