JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:400,800&amp;subset=latin-ext" rel="stylesheet">

<img src="https://www.formula1.com/etc/designs/fom-website/images/f1_logo.svg" class="logo">
<!--
<img src="https://www.formula1.com/content/fom-website/en/championship/drivers/jenson-button/_jcr_content/helmet.img.png/1458579657458.png" class="helmet">

<img src="https://www.formula1.com/content/fom-website/en/championship/drivers/jenson-button/_jcr_content/countryFlag.img.jpg/1423664871498.jpg" class="flag">

<img src="https://www.formula1.com/content/fom-website/en/championship/teams/McLaren/_jcr_content/image16x9.img.1920.medium.jpg/1488799995015.jpg" class="team">

<img src="https://www.formula1.com/content/fom-website/en/championship/teams/McLaren/_jcr_content/teamCar.img.jpg" class="team-car">
-->
<div class="driver-card">
  <div class="title">
    <span class="title-text">Jenson Button</span>
  </div>
  <div class="subtitle">
    <span class="subtitle-text">McLaren</span>
  </div>
  <div class="image">
    <img src="https://www.formula1.com/content/fom-website/en/championship/drivers/jenson-button/_jcr_content/image.img.1920.medium.jpg/1495705675097.jpg" class="driver">
  </div>
</div>

SCSS

/// Gives a card depth effect.
/// @param {Number} $depth - depth level (between 1 and 5)
/// @link https://css-tricks.com/snippets/sass/material-shadows-mixin/
/// @link http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-dimensionality Google Design
/// @requires {function} top-shadow
/// @requires {function} bottom-shadow
@mixin card($depth) {
  @if $depth < 1 {
    box-shadow: none;
  } @else if $depth > 5 {
    @warn "Invalid $depth `#{$depth}` for mixin `card`.";
  } @else {
    box-shadow: bottom-shadow($depth), top-shadow($depth);  
  }
}

/// Computes a top-shadow for a card effect.
/// @param {Number} $depth - depth level
/// @return {List}
@function top-shadow($depth) {
  $primary-offset: nth(1.5 3 10 14 19, $depth) * 1px;
  $blur: nth(1.5 3 10 14 19, $depth) * 4px;
  $color: rgba(black, nth(.12 .16 .19 .25 .30, $depth));

  @return 0 $primary-offset $blur $color;
}

/// Computes a bottom-shadow for a card effect.
/// @param {Number} $depth - depth level
/// @return {List}
@function bottom-shadow($depth) {
  $primary-offset: nth(1.5 3 6 10 15, $depth) * 1px;
  $blur: nth(1 3 3 5 6, $depth) * 4px;
  $color: rgba(black, nth(.24 .23 .23 .22 .22, $depth));

  @return 0 $primary-offset $blur $color;
}

body {
  font-family: 'Libre Franklin', sans-serif;
}

.driver-card {
  @include card(1);
  background: #fff;
  display: flex;
  text-transform: uppercase;
}

.driver-card .title {
  font-weight: bold;
  opacity: 0.87;
  text-transform: uppercase;
}

.driver-card .subtitle {
  opacity: 0.87;
}

.driver-card .image {
  height: 240px;
  order: -1;
  overflow: hidden;
  width: 240px;
}

.driver-card .image img {
  margin-left: -120px;
  width: 480px;
}