Here is a complete, interactive Tailwind CSS page that visualizes Dynamic Programming. It includes the **1D Sequential Array** (recreated from your image with animated arrows), a **2D Array Grid** (Unique Paths problem), and a **Recursive Top-Down Tree**. ```html Dynamic Programming — Recursive, 1D, & 2D Arrays

Dynamic Programming

Recursive vs
Sequential Arrays

Explore how dynamic programming optimizes algorithms using top-down recursion, 1D arrays, and 2D matrices.

1D Fibonacci Array 2D Matrix Grid

01 — Bottom-Up

1D Tabulation (Fibonacci)

Recreated from your image. The array is filled sequentially from left to right. Each cell depends on the two previous cells.

fib[0] = 0;

fib[1] = 1;

for (i = 2; i <= n; i++) {

fib[i] = fib[i-1] + fib[i-2];

}

return fib[n];

02 — Bottom-Up

2D Array (Unique Paths)

Moving from top-left to bottom-right, each cell sums the paths from the cell above it and the cell to its left.

for (i = 0; i < m; i++) {

for (j = 0; j < n; j++) {

if (i==0 || j==0)

dp[i][j] = 1; // base case

else

dp[i][j] = dp[i-1][j] + dp[i][j-1];

}

}

Computed Top/Left Neighbors

03 — Top-Down

Recursive with Memoization

Instead of filling an array, we start from the top and recurse down. Repeated branches are served instantly from the cache.

fib(5)
fib(4)
fib(3)HIT
fib(3)
fib(2)HIT
fib(2)
fib(1)

// Memoized Recursive

function fib(n, memo = {}) {

if (n <= 1) return n;

if (memo[n]) return memo[n]; // cache hit

return memo[n] = fib(n-1, memo) + fib(n-2, memo);

}

```