JSFiddle - React, Tailwind, and code Playground

HTML

<Document>
        <Page style={styles.page}>
          <View key="pdf-report-header" style={styles.reportHeader}>
            <Image style={styles.logo} source={Logo} />
            <Text style={styles.reportTitle}>{title}</Text>
            <Text style={styles.reportDate}>{ new Date().toISOString().split(".")[0].replace('T', ' ')}</Text>
          </View>

          <View key={"h"} style={styles.tableHeader} >
          {fields && fields.map((field, index) =>
            <Text style={{display: 'flex', flexDirection: 'row', flexBasis: field.width + '%', fontWeight: 'bold', fontSize: 10, borderWidth: 1, borderColor: '#777'}}>{field.label}</Text>
          )}
          </View>

          {records && records.map((record, index) => {
              return (
                <View key={"r" + index} style={styles.tableRow} >
                  {fields && fields.map((field, index) =>
                    <Text>{record[field.field]}</Text>
                    // <Text style={{display: 'flex', flexDirection: 'row', flexBasis: field.width + '%', fontSize: 10, borderWidth: 1, borderColor: '#777'}}>{record[field.field]}</Text>
                  )}
                </View>
              );
            })
          }
        </Page>
      </Document>