JSFiddle - React, Tailwind, and code Playground
by Josh Pullen
JavaScript
const parser = new DOMParser();
const htmlDoc = parser.parseFromString(`<div class="bg-indigo-600 relative"><div class="max-w-2xl lg:max-w-4xl px-8 mx-auto pt-8 pb-16 lg:pt-24 lg:pb-32 relative"><div class="text-center lg:text-left"><div class="w-32 h-32 sm:w-48 sm:h-48 rounded-full bg-indigo-500 mx-auto mb-8 overflow-hidden lg:bg-transparent lg:rounded-none lg:w-96 lg:h-96 lg:m-0 lg:absolute lg:bottom-0 lg:-right-8"><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;padding-top:133.33333333333331%"></span><img alt="Photo of Josh Pullen" sizes="(max-width: 640px) 128px, (max-width: 1024px) 192px, 384px" srcset="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fjosh-transparent-bg.d70feb93.png&w=16&q=50 16w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fjosh-transparent-bg.d70feb93.png&w=32&q=50 32w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fjosh-transparent-bg.d70feb93.png&w=48&q=50 48w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fjosh-transparent-bg.d70feb93.png&w=64&q=50 64w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fjosh-transparent-bg.d70feb93.png&w=96&q=50 96w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fjosh-transparent-bg.d70feb93.png&w=128&q=50 128w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fjosh-transparent-bg.d70feb93.png&w=256&q=50 256w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fjosh-transparent-bg.d70feb93.png&w=384&q=50 384w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fjosh-transparent-bg.d70feb93.png&w=640&q=50 640w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fjosh-transparent-bg.d70feb93.png&w=750&q=50 750w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fjosh-transparent-bg.d70feb93.png&w=828&q=50 828w,...