JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<div class="experience">
  <h2> EXPERIENCE</h2>        
  <div class="exp_1 triangle-right">
    <div class="bandeau_noir">
      <h3> Stage de 3ème Boulangerie Pâtisserie </h3>
    </div>
    <div class="exp_1_content box">
      <b> ................................</b> <br>
      <b> 2017</b>
      <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
  </div>
</div>

CSS

.experience {
    position: relative;
    margin-top: 6%;
    left: 10%;
    width : 80%;
    margin-bottom: 20%;
    text-align: left;
    font-family: 'Comic Sans MS', cursive;       
}
    
.experience h2 {
    text-align: center;
}

.exp_1{
    position: absolute;
    width :28%;
    left : 10%;
    margin-top : 5%;
    background-color :rgb(243, 243, 243);
       
}
.exp_1_content{
    padding : 20px;
    border: ridge rgb(224, 224, 224);
    border-top-style : none ;
    border-left: none;
    box-shadow : 6px 6px 3px rgb(219, 217, 217);
   
}
.exp_1 .bandeau_noir{
    background-color: rgb(66, 66, 66);
    color: white;
    padding : 3px; 
}

/* TRIANGLE */
.triangle-right::before {
  content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 0;
    border-top: 50px solid rgb(66, 66, 66);
    border-right: 50px solid transparent;
}