JSFiddle - React, Tailwind, and code Playground

by Rene van der Lende

HTML

<div id="main">
        <div class="card">
            <img src="http://placehold.it/500">
            <!-- img src="file://C:/Users/cody/Desktop/offline_website/Images/pilli.jpg" -->
            <h1>Suja Pilli MD.</h1>
<pre>

Education:     
2008-2011                     
           Valley Baptist Family Practice
           Residency Program
           Harlingen, TX
           Family Practice

1993-1999
          Universitatea Ovidius
          Consatanta, Romania
          Doctor of Medicine, September 1999

Medical Licensure and Certification:
         Texas Medical Board

            </pre>
        </div>
 
       <div class="card">
            <img src="http://placehold.it/500">
            <!-- img src="file://C:/Users/cody/Desktop/offline_website/Images/shaun.jpg" -->
            <h1>Shaun Adams FNP.</h1>
            <pre>
Education:     
2012-2014 

         Univesrity Texas Medical Branch
         Galveston, TX
         Masters of Science in Nursing

2010-2011

         Univesrity of Texas Brownsville
         Brownsville, TX
         Bachelors of Science in Nursing.

2005-2007

        University of Texas Brownsville
        Brownsville, TX
        Associates Degree in Nursing

Medical Licensures and Certification:

        Texas Medical Board of Nursing Family
        Nurse Practioner Certified License
        Nurge Register Nurse License
        BLS, ACLS, TNCC, ENPC
</pre>
        </div>
    </div>

CSS

/* * { outline: 1px dashed red } /* for debugging remove beginning slash */

#main { /* main card holding container */
    display: flex;              /* make it a flex container */
    flex-flow: row wrap;        /* main contents are 2 columns inside a row */
    justify-content: center;    /* position cards with margins on either side */
    max-width: 90%;             /* only 90% of body width */ 
    margin: 10% auto;           /* 5% top margin, main centered in body */
}
.card { /* main definition of a c.v. card */
    display: flex;              /* make it a flex container */
    flex-flow: column nowrap;   /* card contents are rows inside a column */
    align-items: center;        /* center card contents */ 
    width: calc(100% - 8px);    /* full width of main, mobile first */
    margin: 4px;                /* some space outside cards */
    padding: 4px;               /* some inside space */
    background-color: #fafafa;  /* off white demo color */
    box-shadow: 0px 4px 9px rgba(42, 47, 57, 0.2);
}
.card *   { /* add your general rules for anything inside card    */ }
.card > * { /* add your general rules for direct children of card */ }
.card h1  { /* exceptions for a H1 */ }
.card img { /* exceptions for an IMG */
              max-width: 33%;   /* some max/min image width */
              min-width: 165px;
}
.card pre { /* exceptions for a PRE */
              padding: 4px;
              font-size: 11px;
              font-family: "courier new", courier, monospace;
}
@media all and (min-width: 721px) {
    .card { width: calc(40% - 8px) }    /* moves cards side by side on larger screens */
}