JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="unix-container about--container">
    <div class="full-height">
        <div class="side">
            <div class="image">
                <div class="back"></div>
                <img src="http://picsum.photos/208/80" alt="">
            </div>
        </div>
        <div class="side">
            <h2>კომპანიის შესახებ</h2>
            <div class="text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt voluptate odit libero facere, culpa animi, aliquam similique veritatis nostrum eveniet aspernatur error itaque quo illo consectetur earum quas aliquid quibusdam?
            </div>
            <a href="" class="see-more">ვცრცლად</a>
        </div>
    </div>
</div>

CSS

a {
    text-decoration: none;
}
ul, li, p, img, h1, h2, h3, h4, h5, h6, input, button, nav {
    padding: 0;
    margin: 0;
    list-style: none;
}
input , textarea {
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
button {
    border: none;
    background: none;
    cursor: pointer;
    outline: none;
}
body {
    margin: 0;
}
* {
    box-sizing: border-box;
}
.unix-container {
    width: 100%;
    padding: 0 60px;
}
.full-height {
    min-height: 100vh;
}
@media (max-width: 1023px) {
    .unix-container {
        padding: 0 33px;
    }
}
@media (max-width: 767px) {
    .unix-container {
        padding: 0 20px;
    }
}
.about--container .full-height {
    display: flex;
    align-items: center;
}
.about--container .full-height .side {
    width: 50%;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
}
.about--container .full-height .side:last-child {
    padding-left: 138px;
}
.about--container .full-height .side .image {
    width: 100%;
    height: 100%;
    position: relative;
}
.about--container .full-height .side .image .back {
    width: 60%;
    height: 35%;
    position: absolute;
    background: #D4224D; 
    top: 45px;
    right: 0;
    transition: .4s;
}
.about--container .full-height .side .image:hover .back {
    width: calc(100% + 12px);
    height: calc(100% - 90px);
}
.about--container .full-height .side .image img {
    width: calc(100% - 12px);
    height: calc(100% - 114px);
    object-fit: cover;
    position: absolute;
    top: 57px;
    left: 0;
}
.about--container .full-height .side:last-child {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.about--container .full-height .side h2 {
    font-size: 60px;
}
.about--container .full-height .side .text {
    font-size: 16px;
    margin-top: 20px;
}
.about--container .full-height .side .see-more {
    margin-top: 70px;
    background: #D31E49;
...