• HTML
• CSS

HTML

<div class="container">
    <h1>Magtimus</h1>
    <hr>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et fuga, facere, ducimus possimus animi voluptatem explicabo incidunt omnis corporis minus, optio delectus! Quod at, consectetur provident nesciunt perferendis, adipisci perspiciatis.</p>

    <span class="tags">Diseño</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab deserunt mollitia sit officiis impedit dolor, autem? Repudiandae quas enim doloribus at minima temporibus repellendus atque sapiente dignissimos a reiciendis debitis expedita excepturi, ad tempora maxime explicabo beatae cumque, assumenda tempore reprehenderit sit aperiam. Sapiente iusto, tenetur doloremque minima voluptates voluptatibus.</p>

    <span class="tags">Tecnología</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente ratione accusantium cupiditate aliquid esse beatae soluta, repellendus exercitationem libero ducimus officia nemo nulla perspiciatis rerum repellat eum? Necessitatibus reprehenderit praesentium dolore atque. Et at, cum itaque quasi deleniti ut distinctio pariatur fugit architecto iste alias dolorem minima voluptas beatae velit placeat a unde nemo, officia optio, dolores, eveniet porro numquam! Ipsa hic doloremque temporibus nulla amet odit voluptatem, aliquam voluptatibus, ipsum veritatis velit ducimus ut inventore dolor. Autem assumenda, magnam.</p>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700');

*{
    font-family: 'Roboto', sans-serif;
}

body{
    background: #0770be;
}

h1{
    font-weight: 400;
}

hr{
    height: 4px;
    background: #ea5100;
    border: none;
}

p{
    font-size: 16px;
    font-weight: 300;
    margin-top: 20px;
}

.container{
    max-width: 500px;
    background: #fff;
    padding: 40px;
    font-size: 22px;
    margin: auto;
    margin-top: 100px;
    border-radius: 10px;
    transition: all 300ms;
}

.container:hover{
    transform: translate(-5px, -10px);
    box-shadow: 10px 10px 20px -5px rgba(0, 0, 0, 0.40);
}

.tags{
    position: relative;
    padding: 5px 60px 5px 50px;
    margin-left: -51px;
    display: inline-block;
    white-space: nowrap;
    color: #fff;
    font-weight: 100;
    background-image: 
        linear-gradient(45deg, #ea5100, #ea5100 32px, rgba(0,0,0,0) 32px),
        linear-gradient(135deg, #ea5100, #ea5100 32px, rgba(0,0,0,0) 32px),
        linear-gradient(135deg, #ea5100, #ea5100);
    background-repeat: no-repeat;
    background-position: 100% 100%, 100% 100%, -32px 100%;
    background-size: 48px 100%, 48px 100%, 100% 100%;
    cursor: default;
}

.tags:before{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: .25em solid transparent;
    border-bottom-color: #a00;
    border-right-color: #a00;
    top: -11px;
    left: 0;
}