JSFiddle - React, Tailwind, and code Playground
HTML
<div class="logo">
<span class="toyota">Toyota</span>
</div>
CSS
body {
font-family: helvetica;
}
span.toyota {
text-transform: uppercase;
color: #e70101;
font-weight: bold;
position: absolute;
top: 184px;
left: -48px;
font-size: 87px;
letter-spacing: .04em;
}
div.logo {
content: '';
display: block;
width: 276px;
height: 178px;
border-radius: 50%;
background: transparent;
box-shadow:
0px 0px 0px 13px #e70101 inset,
15px -4px 0px 5px #e70101 inset,
-15px -4px 0px 5px #e70101 inset;
position: absolute;
left: 60px;
top: 12px;
}
div.logo:before {
content: '';
display: block;
width: 505px;
height: 90px;
border-radius: 50%;
background: transparent;
box-shadow:
0px 0px 0px 10px #e70101 inset,
13px -5px 0px 10px #e70101 inset,
-13px -5px 0px 10px #e70101 inset,
0px -10px 0px 13px #e70101 inset;
position: absolute;
top: 0px;
left: 36px;
}
div.logo:after {
content: '';
display: block;
width: 68px;
height: 158px;
border-radius: 50%;
background: transparent;
box-shadow:
0px 0px 0px 13px #e70101 inset,
0px 15px 0px 8px #e70101 inset,
0px -20px 0px 12px #e70101 inset;
position: absolute;
top: 13px;
left: 104px;
}