Cómo crear cajas en material design en blogger

/* material design box */
.bloggerprobox{background-color:#fff;position:relative;margin:40px 2px;padding:40px 15px 15px;border:1px solid rgba(230,230,230,1);border-radius:5px;box-shadow:0 10px 20px 0 rgba(30,30,30,.07)}
.bloggerprobox h2 {background-color:#02d07a;border-radius:3px;padding:8px 20px!important;position:absolute;margin:0!important;font-size:17px!important;color:#fff;top:-20px;font-weight:bold;left:30px;text-transform:uppercase}
.bloggerprobox.box-yellow h2{background:#e2c601}
.bloggerprobox.box-blue h2{background:#2ad2c9}
.bloggerprobox.box-red h2{background:#f7176a}

/* table detalles */
table.tr-caption-container{min-width:inherit;width:auto;margin:0 auto;border:0;position:relative}
table.tr-caption-container tr td{background-color:transparent;border:0;padding:0}
table.tr-caption-container tr:nth-child(2n+1) td, table.tr-caption-container tr:nth-child(2n+1) td:first-child{border:0;background-color:transparent}
table.tr-caption-container .tr-caption{display:block;font-size:12px;font-style:italic;color:#767676;background-color:transparent;border:0}
table{width:100%;margin:20px 0px;border:1px solid rgba(230,230,230,1);border-radius:7px;overflow:hidden;font-size:14px}
table th{background-color:transparent;padding:15px 20px;border:1px solid #ddd;border-left:0;font-family:Noto Sans;font-size:13px}
table th:last-child, table tr td:last-child, table tr:nth-child(2n) td:last-child{border-right:0}
table td{padding:15px 20px;border:1px solid #ddd;border-left:0;border-top:0;vertical-align:middle}
table tr:nth-child(2n + 1) td{background-color:rgba(0,0,0,.025)}
.table{display:block;overflow-y:hidden;overflow-x:auto;border-radius:3px;scroll-behavior:smooth;}

/* css modo oscuro ajuste la clase si es diferente o elimine esta sección
*/
.darkMode .bloggerprobox{background-color:#2d2d30;color:#fefefe;}
.darkMode .bloggerprobox table,.darkMode .bloggerprobox table td,.darkMode .bloggerprobox{border-color:rgba(255,255,255,.15);color:#fefefe}

<div class="bloggerprobox">
<h2>Descripción</h2>
<!--su texto aqui--> 
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</div>

<div class="bloggerprobox box-blue">
<h2>Descripción</h2>
<!--su texto aqui--> 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

<div class="bloggerprobox box-yellow">
<h2>Lista</h2>
<ul>
<li>texto 1</li>
<li>texto 2</li>
</ul>
</div>

<div class="bloggerprobox">
<h2>Tabla</h2>
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr><td><b>Nombre</b></td> <td>luis miguel</td></tr>
<tr><td><b>Licencia</b></td> <td>Personal</td></tr>
<tr><td><b>Version</b></td> <td>1.0</td></tr>
<tr><td><b>Precio</b></td> <td>$ 100.00</td></tr>
</tbody>
</table>
</div>