<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
const { useState, useEffect } = React;
const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5','Item 6','Item 7','Item 8'];
const [fontSizeMap, setFontSizeMap] = useState({});
const handleMouseEnter = (index) => {
setFontSizeMap((prevSizeMap) => ({
[index]: calculateFontSize(index),
const handleMouseLeave = (index) => {
setFontSizeMap((prevSizeMap) => ({
const calculateFontSize = (index) => {
// You can implement your own logic here to calculate font-size dynamically
<div className="container">
<h1>Dynamic Font-Size Scrollable List</h1>
<div className="scrollable-list">
{items.map((item, index) => (
style={{ fontSize: fontSizeMap[index] }}
onMouseEnter={() => handleMouseEnter(index)}
onMouseLeave={() => handleMouseLeave(index)}
ReactDOM.render(<App />, document.getElementById('app'));
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: font-size 0.2s ease-in-out;
background-color: #f0f0f0;