JSFiddle - React, Tailwind, and code Playground

by Jens Kühn

HTML

<div class="ProfileCanopy ProfileCanopy--large ProfileCanopy--withNav js-variableHeightTopBar is-locked">

  <div class="ProfileCanopy-avatar">


    <div class="ProfileAvatar">
      <a class="ProfileAvatar-container u-block js-tooltip profile-picture" href="#" data-original-title="AMZ Seller ToolBox">
        <img class="ProfileAvatar-image " src="https://pbs.twimg.com/profile_images/972145042348363776/Hx3dg0qs_400x400.jpg" alt="AMZ Seller ToolBox">
    </a>
    </div>
  </div>


  <div class="ProfileCanopy-navBar u-boxShadow">

    <div class="AppContainer">
      <div class="Grid Grid--withGutter">
        <div class="Grid-cell u-size1of3 u-lg-size1of4">
          <div class="ProfileCanopy-card" role="presentation">
            <div class="ProfileCardMini">
              <a class="ProfileCardMini-avatar profile-picture js-tooltip" href="https://pbs.twimg.com/profile_images/972145042348363776/Hx3dg0qs.jpg" title="AMZ Seller ToolBox" data-resolved-url-large="https://pbs.twimg.com/profile_images/972145042348363776/Hx3dg0qs.jpg"
                data-url="https://pbs.twimg.com/profile_images/972145042348363776/Hx3dg0qs.jpg" target="_blank" rel="noopener">
    <img class="ProfileCardMini-avatarImage" alt="AMZ Seller ToolBox" src="https://pbs.twimg.com/profile_images/972145042348363776/Hx3dg0qs_normal.jpg">
  </a>
              <div class="ProfileCardMini-details">
                <div class="ProfileNameTruncated account-group">
                  <div class="u-textTruncate u-inlineBlock">
                    <a class="fullname ProfileNameTruncated-link u-textInheritColor js-nav" href="/AMZToolBox" data-aria-label-part="">
      AMZ Seller ToolBox</a></div><span class="UserBadges"></span>
                </div>
                <div class="ProfileCardMini-screenname">
                  <a href="/AMZToolBox" class="ProfileCardMini-screennameLink u-linkComplex js-nav u-dir" dir="ltr">
        <span class="username u-dir" dir="ltr">@<b...

CSS

body {
  background: blue;
}

.ProfileCanopy-avatar {
  bottom: 0px;
  left: 10px;
  position: absolute;
  transition: bottom .3s;
  z-index: 3;
}

.ProfileAvatar {
  background: #fff;
  border: 5px solid #fff;
  border-radius: 50%;
  height: 200px;
  position: relative;
  width: 200px;
}

a {
  background: transparent;
}

.u-block {
  display: block !important;
}

a:hover,
a:focus,
a:active {
  text-decoration: underline;
}

a:focus {
  outline: 0;
}

a,
a:hover,
a:focus,
a:active {
  color: #F26522;
}

img {
  border: 0;
}

.ProfileAvatar-image,
.ProfileAvatar-placeholderImage {
  -moz-force-broken-image-icon: 1;
  border-radius: 50%;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

a>img:first-child:last-child {
  transition: box-shadow .15s ease-in-out;
}

a:focus>img:first-child:last-child {
  outline: 0;
  box-shadow: 0 0 0 2px #fff, 0 0 2px 4px rgba(0, 132, 180, 0.5);
}

.btn:focus,
.btn.focus,
.Button:focus,
.EmojiPicker-item.is-focused,
.EmojiPicker .EmojiCategoryIcon:focus,
.EmojiPicker-skinTone:focus+.EmojiPicker-skinToneSwatch,
a:focus>img:first-child:last-child,
button:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 2px 4px rgba(242, 101, 34, 0.4);
}

/* is-locked */

.ProfileCanopy.is-locked .ProfileCanopy-avatar {
  bottom: 200px;
}

.ProfileCanopy-card {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 60px;
  margin-right: -10px;
  max-width: 100%;
  overflow: hidden;
  padding-top: 60px;
  transition: padding-top .3s;
}

.ProfileCanopy.is-locked .ProfileCanopy-card {
  padding-top: 0;
}