index.html

<div class="min-h-screen bg-gray-100 flex items-center justify-center p-4">
  <!-- 메인 카드 컨테이너 -->
  <div class="w-full max-w-2xl relative">
    <div class="flex gap-6">
      <!-- 왼쪽 컨텐츠 영역 -->
      <div class="flex-1">
        <!-- 상단 노란색 카드 -->
        <div class="bg-yellow-400 rounded-lg p-8 mb-6">
          <div class="flex justify-between items-center mb-8">
            <span class="bg-yellow-200 px-4 py-2 rounded-full text-lg">1/5</span>
            <span class="text-xl font-semibold">Total Timer 0:40:00</span>
          </div>
          <p class="text-3xl font-bold">
            'Your brain has amazing abilities, but it did not come with an instruction manual.'
          </p>
        </div>

        <!-- 하단 텍스트 영역 -->
        <div class="bg-white rounded-lg p-6 border-2 border-dashed border-gray-300">
          <div class="mb-4">
            <label class="text-sm text-gray-600">Text Box</label>
            <div class="mt-2 p-4 bg-white border rounded-lg">
              <p class="mb-4">
                'Your brain has amazing abilities, but it did not come with an instruction manual. You'll find that manual in A Mind for Numbers. Whether you're a novice or an expert, you will find great new ways to improve your skills and techniques for learning, especially related to math and science.'
              </p>
              <p>
                Henri Poincaré was a nineteenth-century mathematician who once described how he cracked a difficult mathematical problem that he had been intensively working on for weeks without success. He took a vacation.
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 오른쪽 컨트롤 버튼 영역 -->
      <div class="flex flex-col gap-4">
        <button class="bg-gray-200 hover:bg-gray-300 px-6 py-2 rounded-lg w-24">START</button>
        <button class="bg-gray-200 hover:bg-gray-300 px-6 py-2 rounded-lg w-24">PAUSE</button>
        <button class="bg-gray-200 hover:bg-gray-300 px-6 py-2 rounded-lg w-24">RESET</button>
        <div class="bg-gray-200 px-6 py-2 rounded-lg text-center w-24">
          <div class="text-sm text-gray-600">Speed</div>
          <div>160</div>
        </div>
      </div>
    </div>
  </div>
</div>