JSFiddle - React, Tailwind, and code Playground

by majikarikeruo

HTML

<div class="c-article-related-posts">
  <ul class="c-article-related-posts__list">
    <li class="c-article-related-posts__item prev">
      <a href="#">
        <figure class="c-article-related-posts__image">
          <img src="https://kosugelian.net/images/stamp18.png" alt="">
        </figure>
        <p class="c-article-related-posts__text">test is very happy!</p>
      </a>
    </li>

  </ul>
</div>

<div class="c-article-related-posts">
  <ul class="c-article-related-posts__list">
    <li class="c-article-related-posts__item prev">
      <a href="#">
        <figure class="c-article-related-posts__image">
          <img src="https://kosugelian.net/images/stamp18.png" alt="">
        </figure>
        <p class="c-article-related-posts__text">test is very happy!</p>
      </a>
    </li>
    <li class="c-article-related-posts__item next">
      <a href="#">
        <figure class="c-article-related-posts__image">
          <img src="https://kosugelian.net/images/stamp18.png" alt="">
        </figure>
        <p class="c-article-related-posts__text">test is very happy!</p>
      </a>
    </li>
  </ul>
</div>

CSS

img{
  max-width:100%;
  height:auto;
}
.c-article-related-posts__list {
    display: flex;
    justify-content: center
}

.c-article-related-posts__item {
    position: relative;
    width: 238px;
    border: solid 1px #D9D9D9;
    list-style:none;
}

.c-article-related-posts__item:first-of-type:not(:only-of-type) {
  border-right:none;
}


.c-article-related-posts__item a {
    box-sizing: border-box;
    display: block;
    padding: 20px
}

.c-article-related-posts__item.prev:before {
    position: absolute;
    top: 50%;
    left: 10px;
    z-index: 100;
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    border-top: solid 1px #000;
    border-left: solid 1px #000;
    transform: translate(0, -50%) rotate(-45deg)
}

.c-article-related-posts__item.prev a {
    padding-left: 45px;
}

.c-article-related-posts__item.prev a:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    display: block;
    content: "";
    width: 25px;
    height: 100%;
}

.c-article-related-posts__item.next:before {
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 100;
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    border-bottom: solid 1px #000;
    border-right: solid 1px #000;
    transform: translate(0, -50%) rotate(-45deg)
}

.c-article-related-posts__item.next a {
    padding-right: 45px;
}

.c-article-related-posts__item.next a:after {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 90;
    display: block;
    content: "";
    width: 25px;
    height: 100%;
}

.c-article-related-posts__image {
    margin-bottom: 20px
}

.c-article-related-posts__text {
    color: #221815;
    font-size: 14px
}