JSFiddle - React, Tailwind, and code Playground

HTML

<section class="overview">
        <div class="container">
            <div class="list">
                <h3>product overview</h3>
                <h1>List of amazing features</h1>
                <div class="list_item">
                    <div class="img_wrap">
                        <img src="img/logo_monitor.png" alt="monitor">
                    </div>
                    <h2>Responsive</h2>
                    <p>Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p>
                </div>
                <div class="list_item">
                    <div class="img_wrap">
                        <img src="img/logo_settings.png" alt="monitor">
                    </div>
                    <h2>Customizable</h2>
                    <p>Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p>
                </div>
                <div class="list_item">
                    <div class="img_wrap">
                        <img src="img/logo_like.png" alt="monitor">
                    </div>
                    <h2>Lovely design</h2>
                    <p>Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p>
                </div>
                <div class="list_item">
                    <div class="img_wrap">
                        <img src="img/logo_phone.png" alt="monitor">
                    </div>
                    <h2>Mobile Friendly</h2>
                    <p>Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p>
                </div>
            </div>
        </div>
        <hr>
        <div class="details">
            <div class="container">
                <div class="details_left">
                </div>
                <div class="details_right">
                    <h3>dip into the details</h3>
                    <h1>Beautiful on every device</h1>
             ...

CSS

.list {
    text-align: center;
    padding-top: 65px;
    padding-bottom: 100px;
}

.list h3 {
    text-transform: uppercase;
    font-family: "SourceSansProBold", sans-serif;
    font-size: 14px;
    color: #008ed6;
    letter-spacing: 1px;
}

.list h1 {
    font-family: "SourceSansProSemiBold", sans-serif;
    font-size: 36px;
    margin-top: 20px;
    position: relative;
    
}

.list h1::after {
    content: '';
    position: absolute;
    background: url(../img/bottom_line.png) no-repeat;
    height: 4px;
    width: 4%;
    display: block;
    bottom: -40px;
    left: 48.5%;
}


.list_item {
    width: 230px;
    margin-top: 73px;
    display: inline-block;
    padding: 0 20px;    
}

.list_item h2 {
    font-family: "SourceSansProRegular", sans-serif;
    font-size: 24px;
    margin-top: 33px;
}

.list_item p {
    font-family: "SourceSansProRegular", sans-serif;
    font-size: 18px;
    color: #999999;
    padding-top: 17px;
}

.img_wrap {
    height: 90px;
    width: 90px;
    border: 1px solid #e4e4e4;
    border-radius: 50%;
    margin: 0 auto;
}

.img_wrap img{
    margin-top: 31px;
}

.overview hr {
    color: #ededed;
    size: 1px;
}

.details {    
    padding-top: 65px;
    padding-bottom: 75px;
}

.details_left {
    width: 40%;
    height: 600px;
    float: left;
    background: url(../img/iphones_bg.png) no-repeat;
    background-size: 420px;
}

.details_right {
    float: right;
    width: 60%;
    padding-top: 45px;
}

.details_right h3 {
    padding-left: 110px;
    font-size: 14px;
    text-transform: uppercase;
    font-family: "SourceSansProBold", sans-serif;
    color: #008ed6;
    padding-bottom: 15px;

}
.details_right h1 {
    padding-left: 110px;
    font-size: 36px;
    font-family: "SourceSansProSemiBold", sans-serif;
    position: relative;
    margin-bottom: 68px;
}

.details_right h1::after {
    content: '';
    position: absolute;
    background: url(../img/bottom_line.png) no-repeat;
    height: 4px;
    width: 6%;
   ...