JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<div class="my-4 px-5 py-4 overflow-hidden rounded-2xl flex gap-3 border border-sky-500/20 bg-sky-50/50 dark:border-sky-500/30 dark:bg-sky-500/10"><div class="mt-0.5 w-4"><svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-sky-500" aria-label="Note"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 1.3C10.14 1.3 12.7 3.86 12.7 7C12.7 10.14 10.14 12.7 7 12.7C5.48908 12.6974 4.0408 12.096 2.97241 11.0276C1.90403 9.9592 1.30264 8.51092 1.3 7C1.3 3.86 3.86 1.3 7 1.3ZM7 0C3.14 0 0 3.14 0 7C0 10.86 3.14 14 7 14C10.86 14 14 10.86 14 7C14 3.14 10.86 0 7 0ZM8 3H6V8H8V3ZM8 9H6V11H8V9Z"></path></svg></div><div class="text-sm prose min-w-0 text-sky-900 dark:text-sky-200"><p><strong>Note:</strong>
Your App’s API Keys and App only Access Token, as well as your personal Access Token and Access Token Secret can be obtained from the <a href="/resources/fundamentals/developer-apps">X developer Apps</a> section found in the <a href="/resources/fundamentals/developer-portal">developer portal</a>.</p><p><strong>If you would like to make requests on behalf of another user</strong>, you will need to generate a separate set of Access Tokens for that user using the <a href="https://developer.x.com/resources/fundamentals/authentication/obtaining-user-access-tokens" target="_blank" rel="noreferrer">3-legged OAuth flow</a>, and pass that user’s tokens with your OAuth 1.0a User Context or OAuth 2.0 user context requests.</p></div></div>

CSS

.dark\:bg-sky-500\/10:is(.dark *) {
    background-color: rgba(14, 165, 233, .1);
}

.dark\:border-sky-500\/30:is(.dark *) {
    border-color: rgba(14, 165, 233, .3);
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.w-4 {
    width: 1rem;
}

.mt-0\.5 {
    margin-top: .125rem;
}
.dark\:text-sky-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(186 230 253 / var(--tw-text-opacity));
}
.bg-sky-50\/50 {
    background-color: rgba(240, 249, 255, .5);
}

.border-sky-500\/20 {
    border-color: rgba(14, 165, 233, .2);
}

.border {
    border-width: 1px;
}

.rounded-2xl {
    border-radius: var(--rounded-2xl, 1rem);
}
.overflow-hidden {
    overflow: hidden;
}
.gap-3 {
    gap: .75rem;
}
.flex {
    display: flex
;
}
.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}