JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contenedor">
    <div class="col">
        <a href="#"><img src="http://www.bemequer.com/fotos/programa-mujeres1.jpg" /></a>
        <p>En Bemequer somos especialistas en entrenamientos personales para mujeres. El novedoso sistema PT4 consiste en un entrenamiento personal con un máximo de 4 alumnas. Para objetivos diferentes programas diferentes.</p>
    </div>
    
    <div class="col">
        <a href="#"><img src="http://www.bemequer.com/fotos/adelgazamiento.jpg" /></a>
        <p>Harás ejercicio acompañada por un entrenador personal con el novedoso sistema PT4. La Electroestimulación Neuromuscular combinada con ejercicio aeróbico te permite adelgazar reduciendo la grasa localizada donde más te preocupa.</p>
    </div>
    
    <div class="col">
        <a href="#"><img src="http://www.bemequer.com/fotos/pmf.jpg" /></a>
        <p>Es un entrenamiento completo que combina fuerza, ejercicio aeróbico y flexibilidad con ejercicios específicos para cada cliente. Ejercicio adaptado a ti, progresiones para conseguir tus objetivos, acompañamiento de un entrenador personal. </p>
    </div>
    
    <div class="col">
        <a href="#"><img src="http://www.bemequer.com/fotos/modelacion.jpg" /></a>
        <p>Silueta Sana Modelación combina ejercicio aeróbico y tonificación muscular y electroestimulación neuromuscular. Sobre abdomen para eliminar el inestético flotador y sobre zona de glúteos y muslos para eliminar las cartucheras.  </p>
    </div>
    
    <div class="col">
        <a href="#"><img src="http://www.bemequer.com/fotos/pilates.jpg" /></a>
        <p>La actividad de Pilates puede ser complementada con otras clases como un Programa de Mejoramiento Físico (cardio) o Gimnasia Abdominal Hipopresiva. Grupos de 4 o 6 personas y adaptado a las posibilidades físicas de cada uno. </p>
    </div>
    
    <div class="col">
        <a href="#"><img src="http://www.bemequer.com/fotos/patologias.jpg" /></a>
        <p>Somos un equipo de técnicos del deporte...

CSS

.contenedor {
    display: table;
    margin: auto;
    max-width: 900px;
    width: 100%;
}

.col {
    float: left;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 14px;
    max-width: 290px;
    padding: 20px 4px;
    text-align: center;
}

.col img {
    box-shadow: 0px 0px 4px #CCCCCC;
    width: 100%;
}

.col p {
    
}

@media (max-width: 980px) {
  .contenedor {
    max-width: 596px;
  }
}

@media (max-width: 640px) {
    .col {
        box-sizing: border-box;
        min-width: 100%;
        padding: 10px 50px;
    }
}

@media (max-width: 360px) {
    .col {
        padding: 4px;
    }
}