JSFiddle - React, Tailwind, and code Playground

by Ricardo Zambon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/4.1.13/lib.min.js"></script>

<main class="max-w-6xl mx-auto px-4 sm:px-6 pt-6 pb-20">
      <h2 class="text-2xl font-semibold mb-6">Mural – Preview</h2>
      <section class="flex flex-col lg:flex-row gap-6">

        <aside class="lg:w-1/3">
          <div class="bg-[#fdf7ee] rounded-2xl shadow-md border border-[#e1c49a]">
            <div class="px-5 py-4 border-b border-[#e1c49a]/70">
              <h3 class="text-sm font-semibold">Postagens</h3>
            </div>
            <ul class="divide-y divide-[#e1c49a]/60">
              <li>
                <button class="w-full text-left px-5 py-3 bg-[#e8f0ff] border-l-4 border-[#3b82f6]">
                  <span class="text-sm font-semibold">Treino especial</span>
                </button>
              </li>
              <li>
                <button class="w-full text-left px-5 py-3 hover:bg-[#f7eee0]">
                  <span class="text-sm">Aviso importante</span>
                </button>
              </li>
            </ul>
          </div>
        </aside>

        <section class="lg:w-2/3">
          <article class="bg-[#fdf7ee] rounded-2xl shadow-md border border-[#e1c49a] p-6">
            <h3 class="text-xl font-semibold mb-2">Treino especial</h3>
            <p class="text-sm leading-relaxed">
              Konbanwa, samurais! Este é apenas um preview visual do layout.
            </p>
          </article>
        </section>

      </section>
    </main>