JSFiddle - React, Tailwind, and code Playground
by luka kupunia
HTML
<div id="logo">
<svg class="main ka-logo" xmlns="http://www.w3.org/2000/svg" width="89.567" height="107.48" viewBox="0 0 89.567 107.48">
<g id="Group_1400" data-name="Group 1400" transform="translate(-492.543 -118.836)">
<path id="Path_6149" data-name="Path 6149" d="M537.327,118.836c-26.871,0-44.784,9.162-44.784,9.162v53.765c0,26.64,44.784,44.552,44.784,44.552S582.11,208.4,582.11,181.764V128S564.2,118.836,537.327,118.836Zm40.3,62.186c0,24.43-40.3,40.857-40.3,40.857s-40.306-16.427-40.306-40.857V132.27s16.122-8.956,40.306-8.956,40.3,8.956,40.3,8.956Z" transform="translate(0 0)" fill="#071322" />
<path id="Path_6150" data-name="Path 6150" d="M535.347,123.833a195.525,195.525,0,0,0-40.3,4.477s4.477,19.384,4.477,49.241c0,20.8,35.827,40.643,35.827,40.643s35.827-19.843,35.827-40.643c0-35.662,4.477-49.241,4.477-49.241A195.524,195.524,0,0,0,535.347,123.833Zm32.191,52.921c0,18.757-32.191,36.652-32.191,36.652s-32.191-17.895-32.191-36.652c0-26.925-4.024-44.4-4.024-44.4a164.334,164.334,0,0,1,72.429,0S567.537,144.594,567.537,176.754Z" transform="translate(1.98 3.959)" fill="#e3001b" />
<g id="Group_1388" data-name="Group 1388" transform="translate(517.234 137.338)">
<g id="Group_1343" data-name="Group 1343" transform="translate(6.958 21.917)">
<g id="g7258" transform="translate(2.466)">
<g id="path7260">
<path id="Path_6151" data-name="Path 6151" d="M512.224,141.387a.647.647,0,1,1-.647.647.647.647,0,0,1,.647-.647" transform="translate(-511.577 -141.387)" fill="#071322" />
</g>
</g>
<g id="g7266" transform="translate(9.02)">
<g id="path7268">
<path id="Path_6152" data-name="Path 6152" d="M515.881,141.387a.647.647,0,1,1-.647.647.647.647,0,0,1,.647-.647" transform="translate(-515.234 -141.387)" fill="#071322" />
...
CSS
div#logo .texts {
display: inline-block;
vertical-align: top;
margin-top: 8px;
margin-left: 15px;
}
div#logo .texts div {
line-height: 0em;
overflow: hidden;
margin-bottom: 7px;
}