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 box-shadow">
                    <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 box-shadow">
                    <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 box-shadow">
                    <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 -->
           ...

CSS

/*  service section */
.services{
  font-family: 'Work Sans', sans-serif;
  padding: 100px 0;
}

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

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

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

.service-thumbnail{
  margin: 0;
}


.container {
    display: block;
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
}

.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 h3 {
    margin: 0px 0 15px;
    color: #314584;
}



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

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