JSFiddle - React, Tailwind, and code Playground
by Scott Kaye
HTML
<palindrome text="RacEcaR"/>
<palindrome text="Hello, world"/>
SCSS
palindrome {
position: relative;
top: 20px;
font-size: 2em;
font-weight: 900;
font-family: sans-serif;
&::before, &::after {
position: absolute;
top: 0;
left: 0;
}
&::before {
content: attr(text);
}
&::after {
content: attr(text);
direction: rtl;
unicode-bidi: bidi-override;
color: #fff;
-webkit-filter: blur(4px);
text-shadow: 0 0 15px #66f;
mix-blend-mode: lighten;
}
}