JSFiddle - React, Tailwind, and code Playground

by Dadi Hall

HTML

<div class="container">
			<div class="mag-block">
				<div class="row flex-row">
					<div class="col-md-3 col-sm-6 stick-to-me">

						<a href="#" class="item" >
							<figure>
								<div class="logo">
									<strong class="text">Partner 1</strong>
								</div>
								<figcaption>small text about Partner 1 </figcaption>
							</figure>


							<footer class="more-link">
								<span>Open</span>
							</footer>

						</a>

<div class="sticker">
<p> Sticker </p>
</div>

</div> <!-- stick to me ends -->
          			<div class="col-md-3 col-sm-6 stick-to-me">
            <a href="#" class="item">
              <figure>
                <div class="logo">
                  <strong class="text">Partner 2</strong>
                </div>
                <figcaption> tagline Partner 2</figcaption>
              </figure>
              <footer class="more-link">
                <span>Open</span>
              </footer>
            </a>
            
            <div class="sticker">
            <p> Sticker </p>
            </div>


       </div> <!-- stick to me ends -->
          
          			<div class="col-md-3 col-sm-6 stick-to-me">
						<a href="#" class="item">
							<figure>
								<div class="logo">
									<strong class="text">Partner 3</strong>
								</div>
								<figcaption>tagline Partner 3</figcaption>
							</figure>
							<footer class="more-link">
								<span>Open</span>
							</footer>
						</a>
            
            <div class="sticker">
            <p> Sticker </p>
            </div>
            
					</div> <!-- stick to me ends -->
          
          
					<div class="col-md-3 col-sm-6 stick-to-me">
						<a href="#" class="item">
							<figure>
                <div class="logo">
								<strong class="text">Partner 4</strong>
								</div>
								<figcaption>tagline Partner 4</figcaption>
							</figure>
							<footer class="more-link">
								<span>Open</span>
							</footer>
						</a>
            
         ...

CSS

.flex-row {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .flex-row:after, .flex-row:before {
    display: none; }
  @media (max-width: 767px) {
    .flex-row {
      display: block; } }



/* partners */
.mag-block {
padding: 7px 0 120px; }
  @media (max-width: 991px) {
    .mag-block {
      padding-bottom: 60px; } }
  @media (max-width: 767px) {
    .mag-block {
      padding-bottom: 40px; } }
  .mag-block .row {
    margin-left: -8px;
    margin-right: -8px; }
    .mag-block .row [class^="col-"] {
      padding-left: 8px;
      padding-right: 8px; }
    @media (max-width: 991px) {
      .mag-block .row [class^="col-"] {
        padding-bottom: 16px; } }
  .mag-block .item {
    background-color: #fff;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    border: 1px solid #d5d2d2;
    text-decoration: none !important;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    height: 137px;
    text-align: center;
    color: inherit; }
    .mag-block .item figcaption {
      font-size: 16px;
      line-height: 24px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: 2px 10px 8px; }
      @media (max-width: 1219px) {
        .mag-block .item figcaption {
          font-size: 14px; } }
      @media (max-width: 991px) {
        .mag-block .item figcaption {
          font-size: 16px; } }
      @media (max-width: 767px) {
        .mag-block .item figcaption {
          font-size: 14px; } }
    .mag-block .item .logo {
      height: 50px;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
  ...