JSFiddle - React, Tailwind, and code Playground

by Keyboardguy

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Fundamental CSS comprehension</title>
	<link rel="stylesheet" href="fundemental.css">
  </head>
  <body>

  <section class="card">
    <header>
      <h2>Chris Mills</h2>
    </header>
    <article>
      <img src="https://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg" alt="A picture of Chris - a man with glasses, a beard, and a silly wooly hat">
      <p>50 My Street<br>
         The Town<br>
         Gray Peach<br>
         UK<br>
         ZO50 1MU<br>
        <strong>Tel</strong>: 01234 567 890<br>
        <strong>Mail</strong>: chris@nothere.com</p>
    </article>
    <footer>
      <p>Editing, writing, and web development services</p>
    </footer>
  </section>

  </body>
</html>

CSS

/* .card = 10 specific,
   .card header = 11 specific,
   .card footer = 11 specific, 
   .card article img = 12 specific
*/

/* General page styles */

body {
  margin: 0;
}

html {
  font-family: 'Helvetica neue', Arial, 'sans serif';
  font-size: 10px;
  background-color: #ccc;
}

h2, p {
  margin: 0;
}

h2 {
  font-size: 2em;
  line-height: 25px;
}

/* Card container styles */

.card {
  width: 35em;
  height: 22em;
  margin: 5em auto;
  background-color: red;
  border: 0.2em solid black;
  border-radius: 1.5em;
}

/* Header + footer styles */
.card footer {
  background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));
  border-radius: 0 0 1.5em 1.5em;
}

.card header {
  background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));
  border-radius: 1.5em 1.5em 0 0;
}

.card header, .card footer {
  height: 3em;
  padding: 1em;
}

.card footer p {
  font-size: 1.5em;
  line-height: 25px;
}

/* Business card content styles */

.card article img {
  max-height: 100%;
  float: right;
}

.card article {
  height: 12em;
  background-color: rgba(0,0,0,0.5);
}

.card article p {
  padding: 1em;
  color: rgba(255,255,255,0.9);
}