CCHub Logo CCHub Tailwind Collection
コンポーネント 目次 バウハウスメディカルの目次

バウハウスメディカルの目次

医療/ヘルスケアアプリケーション向けの複雑で応答性の高い目次コンポーネントで、バウハウスにインスパイアされた機能的なデザインと落ち着いた色、ダークモードのサポートが特徴です。ナビゲーション、検索、およびセクションのリンクが含まれています。

プレビュー

HTMLコード 

<div class="font-sans bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 min-h-screen p-4 sm:p-6 lg:p-8">

  <!-- Outer Container with muted primary color accents -->
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden
              border-t-4 border-l-4 border-yellow-500 dark:border-yellow-600
              md:border-t-8 md:border-l-8 md:border-yellow-500 dark:md:border-yellow-600">

    <!-- Header Section with strong geometric lines -->
    <div class="bg-blue-600 dark:bg-blue-800 text-white p-4 sm:p-6 lg:p-8
                relative overflow-hidden
                before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-gradient-to-br before:from-blue-700 before:to-transparent before:opacity-20 before:z-0
                after:content-[''] after:absolute after:bottom-0 after:right-0 after:w-full after:h-full after:bg-gradient-to-tl after:from-red-600 after:to-transparent after:opacity-10 after:z-0">
      <div class="relative z-10 flex flex-col sm:flex-row items-center justify-between">
        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4 sm:mb-0
                   tracking-tight text-white dark:text-gray-50 flex items-center">
          <span class="block w-6 h-6 sm:w-8 sm:h-8 lg:w-10 lg:h-10 bg-red-500 dark:bg-red-600 mr-3 rounded-sm transform rotate-45"></span>
          Medical Index
        </h1>
        <div class="flex items-center space-x-3">
          <span class="text-sm italic opacity-80 hidden md:block">Last Updated: 2023-10-27</span>
          <img src="https://randomuser.me/api/portraits/men/52.jpg" alt="Admin Avatar" class="w-10 h-10 rounded-full-lg border-2 border-white dark:border-gray-300 shadow-md">
        </div>
      </div>
    </div>

    <!-- Main Content Area: Search and Navigation -->
    <div class="p-4 sm:p-6 lg:p-8 grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">

      <!-- Search and Filters Section -->
      <div class="md:col-span-1 border-r-4 border-gray-200 dark:border-gray-700 pr-0 md:pr-6 lg:pr-8 space-y-6">
        <div class="mb-4">
          <label for="search-toc" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Search Documentation</label>
          <div class="relative">
            <input type="text" id="search-toc" placeholder="Search diseases, treatments..." 
                   class="w-full p-3 pl-10 rounded-lg border-2 border-red-300 dark:border-red-600
                          bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100
                          focus:ring-blue-500 focus:border-blue-500 transition duration-200 ease-in-out
                          placeholder-gray-400 dark:placeholder-gray-500">
            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
          </div>
        </div>

        <!-- Filter Options with primary color toggles -->
        <div class="space-y-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Filters</h3>
          <div class="flex flex-wrap gap-3">
            <button class="px-4 py-2 rounded-full text-sm font-medium
                           bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-100
                           hover:bg-blue-200 dark:hover:bg-blue-600 transition duration-200">All Topics</button>
            <button class="px-4 py-2 rounded-full text-sm font-medium
                           bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300
                           hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Diseases</button>
            <button class="px-4 py-2 rounded-full text-sm font-medium
                           bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300
                           hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Treatments</button>
            <button class="px-4 py-2 rounded-full text-sm font-medium
                           bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300
                           hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Protocols</button>
            <button class="px-4 py-2 rounded-full text-sm font-medium
                           bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300
                           hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Diagnostics</button>
          </div>
        </div>

        <!-- Recent Updates Section -->
        <div class="mt-6">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Recent Updates</h3>
          <ul class="space-y-3">
            <li class="flex items-start">
              <span class="flex-shrink-0 w-2 h-2 bg-yellow-500 rounded-full mt-2 mr-2"></span>
              <a href="#" class="text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">New Guidelines for Diabetes Management</a>
            </li>
            <li class="flex items-start">
              <span class="flex-shrink-0 w-2 h-2 bg-red-500 rounded-full mt-2 mr-2"></span>
              <a href="#" class="text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Updated COVID-19 Vaccination Protocols</a>
            </li>
            <li class="flex items-start">
              <span class="flex-shrink-0 w-2 h-2 bg-gray-400 dark:bg-gray-500 rounded-full mt-2 mr-2"></span>
              <a href="#" class="text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Introduction to AI in Diagnostics</a>
            </li>
          </ul>
        </div>
      </div>

      <!-- Table of Contents Main Navigation -->
      <div class="md:col-span-2 space-y-8">

        <!-- Section 1: Core Medical Conditions -->
        <section>
          <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4 pb-2 border-b-2 border-red-400 dark:border-red-700 flex items-center">
            <span class="w-4 h-4 bg-blue-500 dark:bg-blue-600 mr-2 rounded-sm rotate-45"></span>
            Core Medical Conditions
          </h2>
          <ul class="space-y-3 pl-4 sm:pl-6">
            <li><a href="#cardiovascular" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Cardiovascular Diseases</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#hypertension" class="hover:text-blue-600 dark:hover:text-blue-400">Hypertension: Diagnosis & Management</a></li>
                <li><a href="#ischemic-heart-disease" class="hover:text-blue-600 dark:hover:text-blue-400">Ischemic Heart Disease</a></li>
                <li><a href="#arrhythmias" class="hover:text-blue-600 dark:hover:text-blue-400">Arrhythmias and ECG Interpretation</a></li>
              </ul>
            </li>
            <li><a href="#respiratory" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Respiratory Diseases</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#asthma" class="hover:text-blue-600 dark:hover:text-blue-400">Asthma and COPD</a></li>
                <li><a href="#pneumonia" class="hover:text-blue-600 dark:hover:text-blue-400">Pneumonia: Types & Treatment</a></li>
              </ul>
            </li>
            <li><a href="#endocrine" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Endocrine Disorders</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#diabetes-mellitus" class="hover:text-blue-600 dark:hover:text-blue-400">Diabetes Mellitus: Type 1 & 2</a></li>
                <li><a href="#thyroid-disorders" class="hover:text-blue-600 dark:hover:text-blue-400">Thyroid Disorders</a></li>
              </ul>
            </li>
          </ul>
        </section>

        <!-- Section 2: Medical Procedures & Diagnostics -->
        <section>
          <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4 pb-2 border-b-2 border-red-400 dark:border-red-700 flex items-center">
            <span class="w-4 h-4 bg-blue-500 dark:bg-blue-600 mr-2 rounded-sm rotate-45"></span>
            Medical Procedures & Diagnostics
          </h2>
          <ul class="space-y-3 pl-4 sm:pl-6">
            <li><a href="#surgical-techniques" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Surgical Techniques</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#minimally-invasive" class="hover:text-blue-600 dark:hover:text-blue-400">Minimally Invasive Surgery</a></li>
                <li><a href="#post-operative-care" class="hover:text-blue-600 dark:hover:text-blue-400">Post-Operative Care Protocols</a></li>
              </ul>
            </li>
            <li><a href="#imaging" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Medical Imaging</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#mri-ct-scans" class="hover:text-blue-600 dark:hover:text-blue-400">MRI & CT Scans Interpretation</a></li>
                <li><a href="#ultrasound" class="hover:text-blue-600 dark:hover:text-blue-400">Diagnostic Ultrasound</a></li>
              </ul>
            </li>
          </ul>
        </section>

        <!-- Section 3: Pharmacology & Therapeutics -->
        <section>
          <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4 pb-2 border-b-2 border-red-400 dark:border-red-700 flex items-center">
            <span class="w-4 h-4 bg-blue-500 dark:bg-blue-600 mr-2 rounded-sm rotate-45"></span>
            Pharmacology & Therapeutics
          </h2>
          <ul class="space-y-3 pl-4 sm:pl-6">
            <li><a href="#drug-classes" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Drug Classes & Mechanisms</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#antibiotics" class="hover:text-blue-600 dark:hover:text-blue-400">Antibiotics: Spectrum & Resistance</a></li>
                <li><a href="#analgesics" class="hover:text-blue-600 dark:hover:text-blue-400">Analgesics & Pain Management</a></li>
              </ul>
            </li>
            <li><a href="#vaccines" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Vaccines & Immunization</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#childhood-immunization" class="hover:text-blue-600 dark:hover:text-blue-400">Childhood Immunization Schedule</a></li>
              </ul>
            </li>
          </ul>
        </section>

        <!-- Section 4: Public Health & Epidemiology -->
        <section>
          <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4 pb-2 border-b-2 border-red-400 dark:border-red-700 flex items-center">
            <span class="w-4 h-4 bg-blue-500 dark:bg-blue-600 mr-2 rounded-sm rotate-45"></span>
            Public Health & Epidemiology
          </h2>
          <ul class="space-y-3 pl-4 sm:pl-6">
            <li><a href="#disease-outbreaks" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Disease Outbreaks & Control</a></li>
            <li><a href="#preventative-medicine" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Preventative Medicine Strategies</a></li>
          </ul>
        </section>

      </div>

    </div>

    <!-- Footer with simple branding -->
    <div class="bg-gray-100 dark:bg-gray-800 p-4 sm:p-6 lg:p-8 text-center text-gray-600 dark:text-gray-400 text-sm
                relative overflow-hidden
                before:content-[''] before:absolute before:bottom-0 before:left-0 before:w-full before:h-1 before:bg-yellow-500 dark:before:bg-yellow-600 before:z-0">
      <p class="relative z-10">&copy; 2023 Medical Knowledge Hub. All rights reserved.</p>
    </div>

  </div>

</div>

関連コンポーネント

Table of Contents コンポーネント

マテリアルデザインスタイルでデザインされたレスポンシブな目次コンポーネントで、ビジネス/企業のWebサイト向けのアースカラーとダークテーマのサポートを備えています。

開ける

Table of Contents コンポーネント

マテリアルデザインスタイルでデザインされたシンプルな目次コンポーネントで、アースカラーを利用し、ダークモードをサポートしています。ブログでのコンテンツ消費に適しています。

開ける

目次

Glassmorphism でスタイル設定されたレスポンシブな目次コンポーネントで、ぼかし効果とダーク テーマのサポートを備えたすりガラスのような半透明の要素が特徴です。視覚的に表現するためのセクションとプレースホルダー画像が含まれています。

開ける