JSFiddle - React, Tailwind, and code Playground

by Andy Jones

HTML

<div class="frame-wrapper">
    <div class="frame-tl"></div>
    <div class="frame-tr"></div>
    <div class="frame-br"></div>
    <div class="frame-bl"></div>
    <div class="frame-content">
        company name<br />
        address line 1<br />
        address line 2<br />
        county<br />
        country<br />
        postcode<br />
    </div>
</div>

CSS

.frame-wrapper {
    position: relative;
    width: 200px;
    height: 150px;
    display: block;
}

.frame-tl {
    top: 0;
    left: 0;
    position: absolute;
    width:10px;
    height:10px;
    border-width: 5px;
    border-style: solid none none solid;
    border-color: #eb0000;
}

.frame-tr {
    top: 0;
    right: 0;
    position: absolute;
    width:10px;
    height:10px;
    border-width: 5px;
    border-style: solid solid none none;
    border-color: #eb0000;
}

.frame-br {
    bottom: 0;
    right: 0;
    position: absolute;
    width:10px;
    height:10px;
    border-width: 5px;
    border-style: none solid solid none;
    border-color: #eb0000;
}

.frame-bl {
    bottom: 0;
    left: 0;
    position: absolute;
    width:10px;
    height:10px;
    border-width: 5px;
    border-style: none none solid solid;
    border-color: #eb0000;
}

.frame-content {
    position: absolute;
    top: 50%;
    left: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%,-50%);
    text-align: center;
}