پیشنمایش زنده
کد HTML
<div
class="flex items-center w-3/4 flex-row my-8 py-6 pl-12 pr-4 isolate [unicode-bidi:isolate] bg-[#1d1e21] rounded-xl relative before:content-[''] before:absolute before:w-1 before:h-4/5 before:bg-[#373c3d] before:z-[10] before:left-6"
>
<p class="white-space-pre-wrap [&:not(:first-child)]:mt-3 text-[#9c9c9c]">
<span class="font-semibold">Note:</span> npx requires npm version 5.2 or
later. If you’ve installed the latest versions of Node and npm, you should
also have npx. Otherwise, you should upgrade Node and/or npm.
</p>
</div>
کد CSS
.relative{position:relative}.isolate{isolation:isolate}.my-8{margin-top:2rem;margin-bottom:2rem}.flex{display:flex}.w-3\/4{width:75%}.flex-row{flex-direction:row}.items-center{align-items:center}.rounded-xl{border-radius:0.75rem}.bg-\[\#1d1e21\]{--tw-bg-opacity:1;background-color:rgb(29 30 33 / var(--tw-bg-opacity))}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pl-12{padding-left:3rem}.pr-4{padding-right:1rem}.font-semibold{font-weight:600}.text-\[\#9c9c9c\]{--tw-text-opacity:1;color:rgb(156 156 156 / var(--tw-text-opacity))}.\[unicode-bidi\:isolate\]{unicode-bidi:-webkit-isolate;unicode-bidi:isolate}.before\:absolute::before{content:var(--tw-content);position:absolute}.before\:left-6::before{content:var(--tw-content);left:1.5rem}.before\:z-\[10\]::before{content:var(--tw-content);z-index:10}.before\:h-4\/5::before{content:var(--tw-content);height:80%}.before\:w-1::before{content:var(--tw-content);width:0.25rem}.before\:bg-\[\#373c3d\]::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(55 60 61 / var(--tw-bg-opacity))}.before\:content-\[\'\'\]::before{--tw-content:'';content:var(--tw-content)}.\[\&\:not\(\:first-child\)\]\:mt-3:not(:first-child){margin-top:0.75rem}