JSFiddle - React, Tailwind, and code Playground

by zakir08

HTML

<section class="about">
        <div class="container">
            <div class="about-wrap">
                <div class="about-thumbnail">
                    <img src="http://demo.thehtmlcoder.net/tutorial-images/about.jpg" alt="text related image">
                </div>
                <!-- /.about-thumbnail -->
                <div class="about-text">
                    <div class="body-content">
                        <h2>Some Fine <span>Words About Us</span></h2>
                        <p>Vestibulum ac diam sit amet quam vehicula elementum amet est on dui. Nulla porttitor accumsan tincidunt.</p>
                        <p>Vestibulum ac diam sit amet quam vehicula elementum amet est on dui. Nulla porttitor accumsan tincidunt.</p>
                        <a href="#" class="button button-radius">more about us</a>
                    </div>
                    <!-- /.body-content -->
                </div>
                <!-- /.about-text -->
            </div>
            <!-- /.about-wrap -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /.about -->

CSS

/* about section start here */

.about{
  padding: 90px 0 100px;
  background-color: #f9f9f9;
}

.about-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.about-wrap .about-thumbnail {
    width: 100%;
    max-width: 40%;
}

.about-wrap .about-thumbnail img{
  max-width: 100%;
}

.about-wrap .about-text {
    width: 100%;
    max-width: 60%;
    padding-left: 50px;
}

.about-wrap .body-content {
    max-width: 100%;
    ;
}

.about-wrap .body-content h2 {
    font-size: 45px;
    line-height: 60px;
    margin-bottom: 30px;
    color: #314584;
}

.about-wrap .body-content h2 span{
  display: block;
}

.about-wrap .body-content p {
    margin-top: 0;
    margin-bottom: 15px;
}

.about-wrap .body-content a {
    margin-top: 30px;
    display: inline-block;
    padding: 18px 35px;
    font-weight: 600;
    color: #fff;
    background-color: #ff3946;
    text-transform: capitalize;
    transition: all .5s ease;
    font-size: 18px;
    border-radius: 30px;
}


.about-wrap .body-content a:hover {
    background-color: #314584;
}