yude.jp/src/components/Activities.tsx

export default function Activities() {
    return (
        <>
        <div className="rounded-lg w-full">
            <ol className="relative border-s border-gray-700 left-2 mt-3">            
                <li className="mb-2 ms-4">
                    <div className="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -start-1.5 border border-gray-900 bg-gray-700"></div>
                    <time className="mb-1 text-sm font-normal leading-none text-gray-400">
                        2023 年 12 月
                    </time>
                    <h3 className="text-lg font-semibold text-white">
                        <a href="https://icttoracon.net/">
                            ICT トラブルシューティングコンテスト 2023
                        </a>
                    </h3>
                    <p className="text-base font-normal text-gray-400">
                        チーム「いちぴろ・エクスプローラ」
                    </p>
                </li>
                <li className="mb-2 ms-4">
                    <div className="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -start-1.5 border border-gray-900 bg-gray-700"></div>
                    <time className="mb-1 text-sm font-normal leading-none text-gray-400">
                        2023 年 11 月
                    </time>
                    <h3 className="text-lg font-semibold text-white">
                        <a href="https://hiss25th.sakura.ne.jp/">
                        第 25 回 IEEE 広島支部学生シンポジウム
                        </a>
                    </h3>
                    <p className="text-base font-normal text-gray-400">
                        ポスター発表
                        <p>「マイクロコンピュータ向け自律分散死活システムの設計と実装」</p>
                    </p>
                </li>
                <li className="mb-2 ms-4">
                    <div className="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -start-1.5 border border-gray-900 bg-gray-700"></div>
                    <time className="mb-1 text-sm font-normal leading-none text-gray-400">
                        2022 年 9 月
                    </time>
                    <h3 className="text-lg font-semibold text-white">
                        <a href="https://www.iij.ad.jp/">
                            インターンシップ @ 株式会社インターネットイニシアティブ
                        </a>
                    </h3>
                    <p className="text-base font-normal text-gray-400">
                        ExperienceCourse -クラウド編-
                    </p>
                </li>
                <li className="mb-2 ms-4">
                    <div className="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -start-1.5 border border-gray-900 bg-gray-700"></div>
                    <time className="mb-1 text-sm font-normal leading-none text-gray-400">
                        2022 年 8 月
                    </time>
                    <h3 className="text-lg font-semibold text-white">
                        <a href="https://www.hirotec.co.jp/">
                            インターンシップ @ 株式会社ヒロテック
                        </a>
                    </h3>
                </li>
            </ol>
        </div>
        </>
    )
  }