JSFiddle - React, Tailwind, and code Playground

by seevis

HTML

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=La+Belle+Aurore&display=swap" rel="stylesheet">

<div class="belkonkup">
<div class="belkuptxt">
dashing through the snow. In a one-horse open sleigh
</div>
</div>

  <div class="bazakonk">

    <img src="https://64.media.tumblr.com/df2e09cbb5604e0f0fefe50c96921c10/tumblr_pupbu27N5r1xmdhj3o1_500.gif" class="imgkonk">
    <img src="https://64.media.tumblr.com/0dc9d69eebc622cf6637d6ba80be4af8/tumblr_ox01pcjx2O1ut1d6co2_540.gif" class="imgkonk">
  <div class="belkdownname">
Arthur Morgan
</div></div>

CSS

body {
  background-color: #fcfcfc;
  margin-top: 70px;
}

.bazakonk {
  width: 380px;
  height: 104px;
  font-family: 'Calibri', sans-serif;
}

.imgkonk {
  max-height: 100px;
  border: 4px solid #2c4979;

}

.belkonkup {
  width: 376px;
  padding: 2px;
  background-color: #adb8c4;
  height: 5px;
  margin: 2px;

}


.belkdownname {
  font-family: 'La Belle Aurore', cursive;
  text-align: right;
  margin-right: 20px;
  margin-top: -32px;
  font-size: 18pt;
}

.belkuptxt {
  font-family: 'Calibri', sans-serif;
  text-align: center;
  font-size: 11pt;
  color: #2c4979;
  margin-top: -11px;
  font-weight: bold;
  
}