e-mail

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">

<div class="email1"><div class="email2"><div class="email3"><div class="e-bots"><div class="e-bot" style="background: #fa5f57;"></div><div class="e-bot" style="background: #fcbe2e;"></div><div class="e-bot" style="background: #30ca41;"></div></div><div class="email4">nombre de la pestaña <i class="fas fa-times"></i></div></div><div class="email5"><div class="e-cos"><i class="fas fa-arrow-left"></i></div><div class="e-cos"><i class="fas fa-arrow-right"></i></div><div class="e-cos"><i class="fas fa-redo-alt"></i></div><div class="e-url">enviandounmail.com</div><div class="e-cos"><i class="fas fa-ellipsis-v"></i></div></div>
<div class="e-dat">Para: <span>nombrecool@mail.com</span></div>
<div class="e-dat">De: <span>otronombre@mail.com</span></div>
<div class="e-dat">Asunto: <span>¡Hola!</span></div>
<div class="email6">Lorem ipsum dolor sit amet,

consectetur adipiscing elit. Aliquam ut lacus leo. [b]Aliquam a pellentesque ex.[/b]

Nam pulvinar efficitur lacus bibendum placerat. Donec rutrum auctor eros eget ornare. Etiam turpis mauris, congue a nisi vitae, tempor efficitur nibh. Phasellus scelerisque diam a lacus maximus imperdiet. Curabitur risus lectus, vestibulum a facilisis at, pulvinar sed ipsum.

Cras neque urna, eleifend eu cursus nec, eleifend in felis. Donec dignissim ligula ut pellentesque vehicula. Nulla quis tempor mauris. Etiam sollicitudin nisi vitae ex cursus dignissim.</div>
<div class="email7"><i class="fas fa-font"></i> <i class="fas fa-bold"></i> <i class="fas fa-italic"></i> <i class="fas fa-underline"></i> <i class="fas fa-align-left"></i> <i class="fas fa-align-justify"></i> <i class="fas fa-align-right"></i> <i class="fas fa-quote-right"></i> <i class="fas fa-link"></i> <i class="far fa-image"></i></div>
<div class="email8"><span style="background: #6e93d6;">Enviar</span> <span style="background: #63a583;">Descartar</span> </div>
</div></div><div class="stdcred"><a href="https://stardustcodes.tumblr.com/ "target="_blank">stardust</a></div>

<style>.email1{margin: 10px auto; width: 550px; background: url(https://i.imgur.com/8RqxQWx.png); background-attachment: fixed; border-radius: 10px; padding: 40px 0;}.email2{margin: auto; width: 440px; background: #fff; border-radius: 10px;}.email3{width: 420px; background: #f1f1f1; padding: 10px 10px 0 10px; border-radius: 10px 10px 0 0; display: flex;}.e-bots{width: 40px; display: flex; flex-wrap: wrap; justify-content: space-between;}.e-bot{width: 10px; height: 10px; border-radius: 50%;}.email4{margin-left: 20px; width: 130px; background: #f9f9f9; padding: 0 10px; border-radius: 5px 5px 0 0; font-family: roboto; font-weight: 400; font-size: 11px; color: #2e2e2e;}.email4 i{float: right; padding-top: 3px;}.email5{width: 430px; background: #f9f9f9; padding: 5px; display: flex; flex-wrap: wrap; justify-content: space-around;}.e-cos{width: 14px; height: 14px; padding: 5px 5px 3px 5px; text-align: center; background: #fff; border: 1px solid #f1f1f1; border-radius: 2px; font-size: 11px; color: #2e2e2e;}.e-url{width: 290px; padding: 3px 10px 0 10px; background: #fff; border: 1px solid #f1f1f1; border-radius: 10px; font-family: roboto; font-weight: 400; font-size: 11px; color: #2e2e2e;}.e-dat{margin-top: -5px; padding: 0 10px 10px 10px; border-bottom: 1px solid #d9d9d9; font-family: roboto; font-weight: 600; font-size: 11px; color: #2e2e2e;}.e-dat span{font-weight: 400;}.e-dat a{text-decoration: none; color: #2e2e2e;}.email6{height: 150px; overflow: auto; padding: 5px 20px 20px 20px; font-family: roboto; font-weight: 400; font-size: 11px; color: #2e2e2e; text-align: justify; line-height: 140%;}.email7{width: 420px; padding: 5px 10px; display: flex; flex-wrap: wrap; justify-content: space-around; border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9;}.email7 i{width: 15px; padding: 5px; background: #fff; font-size: 11px; color: #2e2e2e; text-align: center; border-radius: 2px; margin: 0 5px; transition: 0.5s;}.email7 i:hover{background: #f1f1f1;}.email8{width: 420px; padding: 5px 10px; display: flex; flex-wrap: wrap; justify-content: space-around;}.email8 span{width: 170px; background: #987654; padding: 5px 10px; font-family: roboto; font-weight: 400px; font-size: 12px; color: #fff; text-align: center; border-radius: 5px; margin: 0 5px;}.email6::-webkit-scrollbar{width: 8px;}.email6::-webkit-scrollbar-track {background: #fff;}.email6::-webkit-scrollbar-thumb {background: #d9d9d9;}.stdcred{margin: 0 auto; width: 90px; padding: 3px; background: #fff; text-align: center; border: 1px solid #d9d9d9; border-radius: 10px;}.stdcred a{text-decoration: none; font-family: calibri; font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: 3px;}</style>