JSFiddle - React, Tailwind, and code Playground

by Grobbert

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css">
<div class="container max-w-6xl">
  <div class="flex mt-20 ml-20 relative">
    <div class="filet"></div>
    <div class="bg-blue-900 w-1/2 flex-shrink-0">

    </div>
    <div class="text-block relative bg-gray-100 p-10">
      <h1 class="text-4xl">
        Nos actions à l'étranger
      </h1>
            <p>
        Donec consequat, tellus sed consectetur interdum, erat velit cursus ante, ut vulputate metus nulla in dolor. Quisque eu ultricies ligula. Aliquam pharetra ultricies dolor vitae dapibus. Fusce scelerisque iaculis neque, vitae auctor mauris pellentesque vitae. In sed ornare sapien.
      </p>
      <p>
        Donec consequat, tellus sed consectetur interdum, erat velit cursus ante, ut vulputate metus nulla in dolor. Quisque eu ultricies ligula. Aliquam pharetra ultricies dolor vitae dapibus. Fusce scelerisque iaculis neque, vitae auctor mauris pellentesque vitae. In sed ornare sapien.
      </p>
      <button class="bg-blue-500 text-white rounded px-4 py-2">
        Toutes nos actions
      </button>
    </div>
  </div>
</div>

SCSS

.filet {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 2rem;
  left: -2rem;
  box-shadow: inset 5px 0 0 0 red, inset 0 -5px 0 0 red;

  &:before {
    content: "";
    position: absolute;
    width: 10%;
    height: 100%;
    top: 0;
    left: 0;
    box-shadow: inset 0 5px 0 0 red;
  }
  &:after {
    content: none;
    position: absolute;
    width: 100%;
    height: 15%;
    bottom: 0;
    left: 0;
    box-shadow: inset -5px 0 0 0 red;
  }
}

.text-block {
  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 15%;
    box-shadow: inset -5px 0 0 0 red;
    left: -2rem;
    bottom: -2rem;
  }
}