JSFiddle - React, Tailwind, and code Playground

by Jesper Brinch Korsbakke

HTML

<div class="user-profile grid">

  <span class="user-profile__username">
    Rob Ott
  </span>

  <img src="https://placehold.it/150x100" class="user-profile__avatar"/>

  <p class="user-profile__bio">
    made of metal
    likes animals
    hates water skiing
  </p>

</div>

CSS

.grid {
  grid-template-areas:
    'avatar name'
    'bio    bio';
}

.user-profile__username {
  grid-area: name;
}

.user-profile__avatar {
  grid-area: avatar;
}

.user-profile__bio {
  grid-area: bio;
}

@media (min-width: 700px) {
  .grid {
    grid-template-areas:
      'avatar'
      'name'
      'bio';
  }
}