JSFiddle - React, Tailwind, and code Playground

by marco_rensch

HTML

<div class="card card-default">
  <div class="card-body">
    <h3>Card Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla nobis cum libero sed, quos quam commodi minima corrupti velit culpa necessitatibus reiciendis nam, labore quidem vitae officiis omnis ducimus fugit quasi accusamus iure repellat laborum alias, aliquam natus! Laboriosam enim voluptate necessitatibus incidunt nulla odio obcaecati dolore magnam aut ipsam.</p>
  </div>
  <div class="card-footer">
    <span class="meta">Metatext</span>
  </div>
</div>

<div class="card card-primary">
  <div class="card-body">
    <h3>Card Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla nobis cum libero sed, quos quam commodi minima corrupti velit culpa necessitatibus reiciendis nam, labore quidem vitae officiis omnis ducimus fugit quasi accusamus iure repellat laborum alias, aliquam natus! Laboriosam enim voluptate necessitatibus incidunt nulla odio obcaecati dolore magnam aut ipsam.</p>
  </div>
  <div class="card-footer">
    <span class="meta">Metatext</span>
  </div>
</div>

<div class="card card-secondary">
  <div class="card-body">
    <h3>Card Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla nobis cum libero sed, quos quam commodi minima corrupti velit culpa necessitatibus reiciendis nam, labore quidem vitae officiis omnis ducimus fugit quasi accusamus iure repellat laborum alias, aliquam natus! Laboriosam enim voluptate necessitatibus incidunt nulla odio obcaecati dolore magnam aut ipsam.</p>
  </div>
  <div class="card-footer">
    <span class="meta">Metatext</span>
  </div>
</div>

CSS

*{
  font-family:sans-serif;
}
.card{
  border-radius:4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin: 20px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.card-body{
  padding: 10px;
}
.card-footer{
  text-align: center;
  padding: 0 0 10px 0;  /* 10px Padding unten */
}

.card-primary{
  background-color: rgba(0, 0, 0, 0.8);
}

.card-secondary{
  background-color: #020024;
}

/* Doppelte Zuweisung: */
.card-primary, 
.card-secondary {
  color: rgba(255, 255, 255, 0.8);  
}
/*   Doppelte Zuweisung mit Detailangabe: 
     Alle SPAN Elemente innerhalb eines card-footer innerhalb eines containers mit der Klasse card-primary oder card-secondary 
*/
.card-primary .card-footer span, 
.card-secondary .card-footer span {
  color: rgba(255, 255, 255, 0.3);  
}