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 custom-filet">
    <div class="filet"></div>
    <div class="bg-blue-900 w-1/2 flex-shrink-0">

    </div>
    <div class="bg-gray-100 p-10">
      <h1 class="text-4xl">
        Nos actions à l'étranger
      </h1>
      <p class="pb-3">
        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>
      <a href=".." class="bg-blue-500 text-white rounded px-4 py-2 mt-4">
        Toutes nos actions
      </a>
    </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: "";
    position: absolute;
    width: 100%;
    height: 15%;
    bottom: 0;
    left: 0;
    box-shadow: inset -5px 0 0 0 red;
  }
}