JSFiddle - React, Tailwind, and code Playground

by zakir08

HTML

<section class="slider">
        <div class="container">
            <div class="slider-wrap">
                <div class="slider-content">
                    <h2>The Spirit of <span>Digital Agency.</span></h2>
                    <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>
            <!-- /.slider-wrap -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /.slider -->

CSS

/* slider section start here  */

.slider {
    background: #ffffff url('http://demo.thehtmlcoder.net/tutorial-images/banner.jpg') no-repeat center;
    padding: 150px 0 160px;
}

.slider-content {
    width: 100%;
    max-width: 50%;
}

.slider-content h2 {
    font-size: 73px;
    font-weight: 700;
    color: #314584;
    line-height: 95px;
    letter-spacing: 1px;
}

.slider-content h2 span {
    display: block;
}

.slider-content p {
    margin: 35px 0;
}

.slider-content a {
    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;
}

=

.slider-content a:hover {
    background-color: #314584;
}