JSFiddle - React, Tailwind, and code Playground

HTML

<head>

  <style>
    .degrade-trois-couleurs {
    background: linear-gradient(-270deg, blue, white, red 97%);
    border: 5px solid #f1f317;
    width: 600px;
    height: 300px;
    }
    
     .degrade-trois-couleurs1 {
    position: absolute; 
    top: 330px;
    background: linear-gradient(-45deg, blue, white, red 97%);
    border: 5px solid #f1f317;
    width: 600px;
    height: 300px;
    }
    
    div {
      font-size: 3em;
      color: #f1f317;
      text-align: center;
      line-height: 300px;
      }
    
  </style>
 </head>

<body>
  <div class="degrade-trois-couleurs">LEGIO PATRIO NOSTRA</div>
  <div class="degrade-trois-couleurs1">I AM A MARINER</div>
</body>