JSFiddle - React, Tailwind, and code Playground

by zakir08

HTML

<section class="services">
        <div class="container">
            <div class="services-wrap">
                <h2>Anything you need,we’ve <span>got you covered</span></h2>
                <div class="services-box">
                    <figure class="service-thumbnail">
                        <img src="http://demo.thehtmlcoder.net/tutorial-images/services-1.jpg" alt="">
                    </figure>
                    <div class="service-text-info">
                        <h3>Mobile App & UI Design</h3>
                        <p>Vestibulum ac diam sit amet quam vehicula elementum amet est on dui. Nulla porttitor accumsan tincidunt.</p>
                    </div>
                    <!-- /.service-text-info -->
                </div>
                <!-- /.services-box -->
                <div class="services-box">
                    <figure class="service-thumbnail">
                        <img src="http://demo.thehtmlcoder.net/tutorial-images/services-2.jpg" alt="">
                    </figure>
                    <div class="service-text-info">
                        <h3>Web & Graphic Design</h3>
                        <p>Vestibulum ac diam sit amet quam vehicula elementum amet est on dui. Nulla porttitor accumsan tincidunt.</p>
                    </div>
                    <!-- /.service-text-info -->
                </div>
                <!-- /.services-box -->
                <div class="services-box">
                    <figure class="service-thumbnail">
                        <img src="http://demo.thehtmlcoder.net/tutorial-images/services-3.jpg" alt="">
                    </figure>
                    <div class="service-text-info">
                        <h3>Web & App Development</h3>
                        <p>Vestibulum ac diam sit amet quam vehicula elementum amet est on dui. Nulla porttitor accumsan tincidunt.</p>
                    </div>
                    <!-- /.service-text-info -->
                </div>
                <!--...

CSS

/*  service section */

.services{
  padding: 90px 0 100px;
}

.services-box{
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

.services-wrap h2 {
    font-size: 45px;
    width: 100%;
    margin-bottom: 40px;
    color: #314584;
}

.services-wrap h2 span{
  display: block;
}

.services-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.services-box {
    width: 100%;
    max-width: 320px;
}

.services-box img{
  max-width: 100%;
}

.services-box h3 {
    margin: 0px 0 15px;
}

.service-text-info {
    padding: 20px;
}

.button-wrap {
    margin-top: 40px;
    width: 100%;
    text-align: center;
}